Use a setter for the ViewChild: private contentPlaceholder: ElementRef; @ViewChild(‘contentPlaceholder’) set content(content: ElementRef) { if(content) { // initially setter gets called with undefined this.contentPlaceholder = content; } } The setter is called with an element reference once *ngIf becomes true. Note, for Angular 8 you have to make sure to set { static: false }, … Read more
Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this: ng config schematics.@schematics/angular:component.style scssand the resulting angular.json shall look like this “schematics”: { “@schematics/angular:component”: { “style”: “scss” } } Other possible solutions & explanations: To create a new project with angular … Read more
Basically, you write a pipe which you can then use in the *ngFor directive. In your component: filterargs = {title: ‘hello’}; items = [{title: ‘hello world’}, {title: ‘hello kitty’}, {title: ‘foo bar’}]; In your template, you can pass string, number or object to your pipe to use to filter on: <li *ngFor=”let item of items … Read more
Add this in your module.ts, declarations: [ AppComponent, ConfirmComponent ] if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add: exports: [ ConfirmComponent ] —Update Angular 9 or Angular 8 with Ivy explicitly enabled— Entry Components With Ivy are not required anymore and now are deprecated … Read more
null removes it: [attr.checked]=”value ? ” : null” or [attr.checked]=”value ? ‘checked’ : null” Hint: Attribute vs property When the HTML element where you add this binding does not have a property with the name used in the binding (checked in this case) and also no Angular component or directive is applied to the same … Read more
With the new Angular router, you can add a [routerLinkActive]=”[‘your-class-name’]” attribute to all your links: <a [routerLink]=”[‘/home’]” [routerLinkActive]=”[‘is-active’]”>Home</a> Or the simplified non-array format if only one class is needed: <a [routerLink]=”[‘/home’]” [routerLinkActive]=”‘is-active'”>Home</a> Or an even simpler format if only one class is needed: <a [routerLink]=”[‘/home’]” routerLinkActive=”is-active”>Home</a> See the poorly documented routerLinkActive directive for more info. … Read more
To answer, you question you could provide a service that wraps the original Http object from Angular. Something like described below. import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; @Injectable() export class HttpClient { constructor(private http: Http) {} createAuthorizationHeader(headers: Headers) { headers.append(‘Authorization’, ‘Basic ‘ + btoa(‘username:password’)); } get(url) { let headers = new Headers(); … Read more
Update – Newest Way Don’t do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated. Last Update From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below, DEMO : … Read more
You have to use providers instead of injectables @Component({ selector: ‘my-app’, providers: [NameService] }) Complete code sample here.