Tutorial by Examples

If our component is not ready and waiting for data from server, then we can add loader using *ngIf. Steps: First declare a boolean: loading: boolean = false; Next, in your component add a lifecycle hook called ngOnInit ngOnInit() { this.loading = true; } and after you get complete dat...

<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>

NgFor provides Some values that can be aliased to local variables index -(variable) position of the current item in the iterable starting at 0 first -(boolean) true if the current item is the first item in the iterable last -(boolean) true if the current item is the last item in the iterable ...

While you are not allowed to use *ngIf and *ngFor in the same div (it will gives an error in the runtime) you can nest the *ngIf in the *ngFor to get the desired behavior. Example 1: General syntax <div *ngFor="let item of items; let i = index"> <div *ngIf="<your cond...