Directives are instructions in the DOM just like the components that are kind of instructions in the DOM but with a template.
We typically add directives with an attribute selector, but technically the selector of a directive can be configured just like the selector of a component,
In Angular we have some built in directives and they can be split into 2 categories:
- Structural Directives: NgIf, NgSwitch and NgFor.
- Attribute Directives: NgClass, NgStyle and NgModel.
Structural Directives
Structural directive are a directives that change the structure of the DOM, its either adds element or doesn’t add’s elements.
we have to prefix the directive with the start symbol (*) which indicates that this is a structural directive
NgIf Directive
When we want display conditionally we ca use the NgIf directive. we have to assign an expression to the NgIf directive and the expression will have to be evaluated to true or false.
export class AppComponent {
isShowing: boolean = false;
}
<div>
<div *ngIf="isShowing">Not Showing</div>
<div *ngIf="!isShowing">Showing</div>
</div>
NgSwitch Directive
When we want to display an element among several possible elements we can use NgSwitch Directive which is like the JavaScript switch statement.
When using NgSwith directive we will use more directives: NgSwitchCase and NgSwitchDefault.
export class AppComponent {
choice: number = 2;
}
<div>
<ul [ngSwitch]="choice">
<li *ngSwitchCase="1">First Option</li>
<li *ngSwitchCase="2">Second Option</li>
<li *ngSwitchCase="3">Third Option</li>
<li *ngSwitchDefault>Default Option</li>
</ul>
</div>
NgFor Directive
When we want to display a list, we can use the NgFor directive.
export class AppComponent {
names: string[] = ["clint eastwood", "lee van cleef", "eli wallach"];
}
<ul>
<li *ngFor="let name of names">{{name}}</li>
</ul>
We can use the index property of the NgFor Directive which is zero based.
export class AppComponent {
names: string[] = ["clint eastwood", "lee van cleef", "eli wallach"];
}
<ul>
<li *ngFor="let name of names;let i=index">{{i + 1}}: {{name}}</li>
</ul>
Attribute Directives
Unlike structural directives, attribute directives don’t add or remove elements. They only change the element they were placed on.
NgClass Directive
With NgStyle we can add and remove a set of CSS classes.
NgStyle Directive
export class AppComponent {
color: string = "blue";
}
<div>
<span [ngStyle]="{color: color}">
{{ color }} text
</span>
</div>
With NgStyle we can add and remove a set of HTML styles
export class AppComponent {
iWantRed: boolean = true;
}
<div>
<span [ngClass]="iWantRed ? 'red-class' : ''">
What is my color?
</span>
<br />
<span [ngClass]="{'red-class': iWantRed}">
What is my color?
</span>
</div>
NgModel Directive
With NgModel we can add two-way data binding to an HTML form element.
This directive allows us to display a data property and update that property when the user makes changes.
export class AppComponent {
twoWayData: string = "initial value";
}
<div>
<input type="text" [(ngModel)]="twoWayData"/>
<br />
{{twoWayData}}
</div>