angular

How can I use “*ngIf else”?

by

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

Angular/RxJS When should I unsubscribe from `Subscription`

by

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

BehaviorSubject vs Observable?

by

BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable. The unique features of BehaviorSubject are: It needs an initial value as it must always return a value on subscription even if it hasn’t received a next() Upon subscription, it returns … Read more

Angular: conditional class with *ngClass

by

Angular version 2+ provides several ways to add classes conditionally: type one [class.my_class] = “step === ‘step1′” type two [ngClass]=”{‘my_class’: step === ‘step1’}” and multiple option: [ngClass]=”{‘my_class’: step === ‘step1’, ‘my_class2’ : step === ‘step2’ }” type three [ngClass]=”{1 : ‘my_class1’, 2 : ‘my_class2’, 3 : ‘my_class4’}[step]” type four [ngClass]=”step == ‘step1’ ? ‘my_class1’ : … Read more

Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

by

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

Difference between Constructor and ngOnInit

by

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

What is the difference between Promises and Observables?

by

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