Directives in Angular 11
Directives
- Directives are instructions in the DOM
- It adds additional behaviors to the elements
- Using inbuilt directives we can manage forms, lists, styles, and what users see.
- There are a few types
- Component directives
- Attribute directives
- Structural directives
Component directives
- These directives are used in the main class.
- Declared by @Component
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Attribute directives
- Listen and modify the behavior of other HTML elements, attributes, properties, and components
- NgClass
- This allows to set the CSS classes dynamically.
- NgStyles
- This directive lets you to set a given DOM element's style properties.
<div [ngStyle]="{'background-color':'green'}"></<div>
- Instead of this you can use following too.
[style.color]="getColor(person.country)"
- NgModel
- This bind inputs, select, text areas...etc and store the required user value in a variable.
- Add two-way data binding
- This allows to create new directives too.
Structural directives
- These directives manipulate the DOM element or change the structure of the DOM element
- These directives begin with *
- Ex: *ngIf, *ngFor
<ul *ngFor="let age of ages">
<li *ngIf="age > 20">
{{age}}
</li>
</ul>
