In most cases you will want to use {static: false}. Setting it like this will ensure query matches that are dependent on binding resolution (like structural directives *ngIf, etc…) will be found. Example of when to use static: false: @Component({ template: ` <div *ngIf=”showMe” #viewMe>Am I here?</div> <button (click)=”showMe = !showMe”></button> ` }) export class … Read more
IMPORTANT UPDATE: ng2-bootstrap is now replaced by ngx-bootstrap ngx-bootstrap supports both Angular 3 and 4. Update : 1.0.0-beta.11-webpack or above versions First of all check your angular-cli version with the following command in the terminal: ng -v If your angular-cli version is greater than 1.0.0-beta.11-webpack, then you should follow these steps: Install ngx-bootstrap and bootstrap: … Read more
After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don’t need any vendor files, no system.js — only webpack. So you do: npm install font-awesome –save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: “apps”: [ { “root”: “src”, … Read more
In Angular 8 , ViewChild takes 2 parameters @ViewChild(ChildDirective, {static: false}) Component
So the answer is no, you don’t. Ng2 will clean it up itself. The Http service source, from Angular’s Http XHR backend source: Notice how it runs the complete() after getting the result. This means it actually unsubscribes on completion. So you don’t need to do it yourself. Here is a test to validate: fetchFilms() … Read more
Here is a working example for file upload to api: Step 1: HTML Template (file-upload.component.html) Define simple input tag of type file. Add a function to (change)-event for handling choosing files. <div class=”form-group”> <label for=”file”>Choose File</label> <input type=”file” id=”file” (change)=”handleFileInput($event.target.files)”> </div> Step 2: Upload Handling in TypeScript (file-upload.component.ts) Define a default variable for selected file. … Read more
You missed the * in front of NgIf (like we all have, dozens of times): <div *ngIf=”answer.accepted”>✔</div> Without the *, Angular sees that the ngIf directive is being applied to the div element, but since there is no * or <template> tag, it is unable to locate a template, hence the error. If you get … Read more
Using ng serve –host 0.0.0.0 will allow you to connect to the ng serve using your ip instead of localhost. EDIT In newer versions of the cli, you have to provide your local ip address instead EDIT 2 In newer versions of the cli (I think v5 and up) you can use 0.0.0.0 as the … Read more
You need to explicitly tell TypeScript the type of the HTMLElement which is your target. The way to do it is using a generic type to cast it to a proper type: this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*…*/) or (as you like) this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*…*/) or (again, matter of preference) const target = e.target as HTMLTextAreaElement; this.countUpdate.emit(target.value./*…*/) This will let … Read more
There is a lot of confusion on this topic because there are so many different ways to do it. Here are the appropriate types used in the following screen shots: private route: ActivatedRoute private router: Router 1) Required Routing Parameters: 2) Route Optional Parameters: 3) Route Query Parameters: 4) You can use a service to … Read more