Angular Directives 01: Directives *ngFor and *ngIf

*ngFor and *ngIf is a structural directive that defines a structure on a certain loop and true false condition.

Previous Blog:
Angular Component 05 : Components ng-content

Here I have done a simple project on how this works, open the project in a new tab and read it for better understanding.

https://stackblitz.com/edit/angular-directives-ngif-ngfor

In app.component.html

app.component.html

In app.component.html I have written *ngIf so if the numbersNgIf condition sets true then it shows numbersNgFor. on the second condition I have set it to false.

So if the *ngIf sees the value as false, it displays numbersTwenty.

the *ngIf values change on (click) of event listeners ie changeToTrue which is a function. Onclicking the funtion.

app.component.ts

app.component.ts

In ts file i am writing the functions and declaring the 1 to 10 on numbersNgFor. Secondly declaring numbersTwenty 11 to 20.

Output

so if you click show 1 to 10, we setting the condition to true, on clicking show 11 to 20 setting the condition to false.

Next Blog
Angular Directives 02: [ngClass] and [ngStyle]

Stackblitz Link
https://stackblitz.com/edit/angular-directives-ngif-ngfor

— — — — — — — — — — — End of Lecture — — — — — — — — — — — —

Full Blog of my angular concepts (all lessons)
https://medium.com/@yuvayuvaraj720444/angular-lessons-5aabcadd2dcb