You can use the following: @Component({ selector: ‘my-app’, template: ` <div *ngFor=”let item of [1,2,3,4]; let i = index”> <button type=”button” (click)=”display(i)”>Click to show and set focus</button> <input #theInput *ngIf=”show === i” type=”text” > </div> `, }) export class App { show = -1; @ViewChild(‘theInput’) private theInput; constructor() { } display(i) { this.show = i; … Read more
It would be better to set the image src to the URL of the image instead of fetching the image through the HTTP Client. [attr.src]=”imageEcho” is causing the additional http request to occur. 2 solved GET http://localhost:4200/[object%20Blob] 404 (Not Found) in Angular
In the base, it works like: You create some class (css/scss) You bind that class dynamicly to your html element based on some condition. Example isBlack = true; div.my-dynamic-class { background-color: #000000; } <div [ngClass]=”{‘my-dynamic-class’: isBlack}”></div> where isBlack would be the boolean based on that class will be applied. Here is the complete documentation: LINK … Read more
Importing TranslateModule in child module’s module.ts worked. Thanks guys. solved Translate pipe is not working in child module [closed]
There are plenty of frameworks that you can use. You can use Bootstrap, Material and Zurb Foundation which are very stable: For Material: npm install –save @angular/material @angular/cdk Also you can get help from here: https://material.angular.io/guide/getting-started For Bootstrap 3: npm install [email protected] –save For Bootstrap 4: npm install bootstrap –save If you added the Bootstrap … Read more
You can do it like this: http://jsfiddle.net/wdryt9zv/175/ Where the top square is the “main” square. Then just replace the squares with the img you want. solved Is there any way to interchange images with clicked image?
https://www.tutorialspoint.com/typescript/typescript_interfaces.html is also a good read. Basically, what I understand about Interface is, it defines properties,methods for the members. And this can be used to reuse the content any number of times. solved Interface in TypeScript’s latest version
Your filters is not an array but an object. So, insert in the following way. filters = { color: { red: true, blue: true }, size: { medium: false } }; filters.color[‘yellow’] = true; filters.size[‘small’] = true; console.log(‘filters=”, filters); 1 solved how to push objects to an array with this structure? [closed]
Using async/await is perfect for your situation. It will help you to make your code more readable and make abstraction of the async part thanks to the await keyword aync post(){ const res1 = await this._service1.save(this.data1).toPromise(); const res2 = await this._service2.save(res1).toPromise(); console.log(‘here is my data 2 ‘ + res2); return ‘what you want, can be … Read more
Angular material 11 : mat-form-field with appearance outline to have customized border radius throughout the project solved Angular material 11 : mat-form-field with appearance outline to have customized border radius throughout the project
Just send it as array of object in key value pair like this CreateMethod(input:HTMLInputElement){ let firstName = {title:input.value} input.value=””; let arrayYouNeedToSend = [{title:input.value}]; this.http.post(this.url,JSON.stringify(arrayYouNeedToSend)) .subscribe(response=>{ //firstName.id=response.json().id; this.postvalue.splice(0,0,firstName); console.log(response.json()); }) 1 solved Multiple parameters as http request Data in angular 4
There are a lot of possible answers, what I think he expected was that you need to make sure that a component is not re-rendered X times more than it should be. For instance, if you setState without checking for redundancy, your component/App will render a lot more than it should if you did the … Read more
Routing is a useful concept of Angular. First read about it carefully and then try to implement it. You can read this link: https://coryrylan.com/blog/introduction-to-angular-routing 2 solved How to use routing in angular 2 for query string parameter URL
An “angular library” in this context refers to self-contained Angular project that stands by itself in the projects/ directory, An Angular Library is summarized as, Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry. Developers can create general solutions for particular domains … Read more
You don’t have pageTypeId property in the object. Because of that, i changed this property to id in the statement, and if you want filter value 1 or 2, i used || characters. Maybe you will edit your code like this, it will work. let tmpArray = [{“id”:”1″},{“id”:”2″},{“id”:”2″},{“id”:”3″},{“id”:”3″}]; this.nodes = tmpArray.filter(x => { return x.id.toString() … Read more