Angular 8 Directives

First of all what is directives? Directives are the elements which change the appearance or behaviour or layout of a DOM element. The directive does the job of add or remove element or change the color of the element in our View(i.e DOM area).DOM is a way to represent your webpage. For example, let us take our HTML table and also other elements which consists of following tags,
A directive is used to manipulate the DOM. It also helps you to extend HTML by providing custom directives. Angular 8 directives can be classified in 3 ways:-

• Component Directives
• Attribute Directives
• Structure Directives

Component Directives:-

A component directive is decorated with @Component directive.It has 3 main blocks.
Class
Class which contains properties and methods for View
Template
it contains HTML file or template to render view in browser
Metadata
Inside the component we see the object like templateurl,selector,styleurls this object is called as METADATA.
Every component should have template.
Tagname: By using this tagname we are going to invoke this component.In the below example we have app-root which is a tagname.

Attribute Directives:-

It is used to change the appearance or behaviour of component or element inside the webpage.It act as an attribute for any HTML tag. The most favourite inbuilt attribute directive is ngModel.We can also have custom attribute directive inside HTML tag for any of DOM elements.

Angular 8 Inbuilt attribute directives:

ngClass : It is used to add or remove css classes with in HTML element. ngStyle : It is used to change the style of an element in HTML.It is very useful when the value is dynamic.For example, you want to change the color of the list elements dynamically during binding.

ngstyle in angular with examples:-
Example 1:- How to change background color using ngStyle?
Here i am loading list of pets in div and change the background color using ngStyle.
<div *ngFor="let pet of listpets" [ngStyle]="{'background-color':'green'}"><div>
Next i want to highlight the ODD one out of the pets.How to do it?
<div *ngFor="let pet of listpets" [ngStyle]="{'color':pet.petname==='ELEPHANT'?'red:'blue'}"><div>

Example 2:-How to change the color of each pets?
Here i am calling a function and change the color of each pets.
<div *ngFor="let pet of listpets" [ngStyle]="{color:getpetcolor(pet.petname)}"><div>

export class PetComponent implements OnInit {

    listpets: Pets[] = [
    {
        "petname": "DOG"
    },
    {
        "petname": "CAT"
    },
    {
        "petname": "BIRD"
    },
    {
        "petname": "ELEPHANT"
    },
    {
        "petname": "DUCK"
    }
    ];
    getpetcolor(petname)
    {
    switch(petname)
    {
        case 'DOG': return 'blue';
        case 'CAT': return 'brown';
        case 'BIRD': return 'black';
        case 'ELEPHANT': return 'red';
        case 'DUCK': return 'darkgreen';
    }
    }
}

Example 3:- How to increase the size of the pet animal?Just for Fun , mean to say increase the font size of each element in the list

<div *ngFor="let pet of listpets"  [style.font-size.px]="24" [ngStyle]="{color:getpetcolor(pet.petname)}"><div>
            

ngclass in angular 8 example:-
Ngclass directive will apply css classes dynamically to HTML.Ngclass directive is used by a [ngClass] selector.
How to add NgClass directive on HTML template in Angular 8?
Example 1:-
Let us see this simple example , so that you can understand better.We can take the same pet example,

export class PetComponent implements OnInit {

    listpets: Pets[] = [
    {
        "petname": "DOG"
    },
    {
        "petname": "CAT"
    },
    {
        "petname": "BIRD"
    },
    {
        "petname": "ELEPHANT"
    },
    {
        "petname": "DUCK"
    }
    ];
    getpetcolor(petname)
    {
    switch(petname)
    {
        case 'DOG': return 'blue';
        case 'CAT': return 'brown';
        case 'BIRD': return 'black';
        case 'ELEPHANT': return 'red';
        case 'DUCK': return 'darkgreen';
    }
    }
}

<div *ngFor="let pet of listpets" [ngClass]="{
                                            'alert-primary':pet.petname==='DOG',
                                            'alert-danger':pet.petname ==='ELEPHANT',
                                            'alert-success':pet.petname ==='CAT'.
                                            'alert-secondary':pet.petname ==='BIRD',
                                            'alert-info':pet.petname ==='DUCK'
                                        }">
{pet.petname}
<div>

Example 2:-
You can also apply both ngClass and ngStyle in same HTML tag.
Take a look at the below example for better understanding

<div *ngFor="let pet of listpets" [ngClass]="{
                                            'alert-primary':pet.petname==='DOG',
                                            'alert-danger':pet.petname ==='ELEPHANT',
                                            'alert-success':pet.petname ==='CAT'.
                                            'alert-secondary':pet.petname ==='BIRD',
                                            'alert-info':pet.petname ==='DUCK'
                                        }"  [ngStyle]="{'font-size.px':24, 'font-weight':'bold'}"  >
{pet.petname}
<div>

Example 3:-
How to apply ngClass for text inside the list?

<div *ngFor="let pet of listpets" [ngClass]="{
                                                'text-primary':pet.petname==='DOG',
                                                'text-secondary':pet.petname ==='CAT',
                                                'text-success':pet.petname ==='BIRD',
                                                'text-danger':pet.petname ==='ELEPHANT',
                                                'text-warning':pet.petname ==='DUCK'
                                            }"  [ngStyle]="{'font-size.px':24, 'font-weight':'bold'}"  >
    {pet.petname}
<div>

Structural Directives:-

Structural directives are used to manipulate and change the structure of DOM elements.There are 3 inbuilt structural directives

• ngIf : It is used to add / remove DOM element
• ngSwitch :It is used to add / remove DOM element by using switch statement
• ngFor :it it used to loop an object or array of elements.