Directives in Angular 11

Directives in Angular 11

   June 26, 2021       Ravi Yasas

---

 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

Ex:

@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>