The hidden property can be used for that [hidden]=”!myVar” See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn’t get hidden because it has a style :host {display: block;} set. (This might behave differently in other browsers – I … Read more
Actually, there are two ways of detecting and acting upon when an input changes in the child component in angular2+ : You can use the ngOnChanges() lifecycle method as also mentioned in older answers: @Input() categoryId: string; ngOnChanges(changes: SimpleChanges) { this.doSomething(changes.categoryId.currentValue); // You can also use categoryId.previousValue and // categoryId.firstChange for comparing old and new … Read more
I would use this syntax to set the index value into an attribute of the HTML element: Angular >= 2 You have to use let to declare the value rather than #. <ul> <li *ngFor=”let item of items; let i = index” [attr.data-index]=”i”> {{item}} </li> </ul> Angular = 1 <ul> <li *ngFor=”#item of items; #i … Read more
Install @angular-devkit/build-angular as dev dependency. This package is newly introduced in Angular 6.0 npm install –save-dev @angular-devkit/build-angular or, yarn add @angular-devkit/build-angular –dev
Angular 4 and 5: Using else: <div *ngIf=”isValid;else other_content”> content here … </div> <ng-template #other_content>other content here…</ng-template> You can also use then else: <div *ngIf=”isValid;then content else other_content”>here is ignored</div> <ng-template #content>content here…</ng-template> <ng-template #other_content>other content here…</ng-template> Or then alone: <div *ngIf=”isValid;then content”></div> <ng-template #content>content here…</ng-template> Demo: Plunker Details: <ng-template>: is Angular’s own implementation of … Read more
TL;DR For this question there are two kinds of Observables – finite value and infinite value. http Observables produce finite (1) values and something like a DOM event listener Observable produces infinite values. If you manually call subscribe (not using async pipe), then unsubscribe from infinite Observables. Don’t worry about finite ones, RxJs will take … Read more
The correct syntax is the following: <div [innerHTML]=”theHtmlString”></div> Documentation Reference
RC6/RC7/Final release FIX To fix this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Here’s the example of a basic module with ReactiveFormsModule import: import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; @NgModule({ imports: … Read more
The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers … Read more
Promise A Promise handles a single event when an async operation completes or fails. Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn’t so far. Observable An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each … Read more