Directive

• Change the behaviour of component

• Are just component with template

• Can be applied to native element or custom component

Two types of directives

Attribute Directive Change behaviour of component without affecting it's template ( NgClass, NgStyle )

Structural Directive Change behaviour of component by modifying template ( NgIf, NgFor )

ngStyle

Directive modifies style attribute of a component

@Component({
    selector: 'my-app',
    template: `
        <div style="padding: 10px" [ngStyle]="{
            color: 'red';
            'font-weight': 'bold'.
            border: myBorder
        }"></div>
    `
})
export class MyComponent{
    myBorder: 1px solid red;
}

ngClass

// Using as string
@Component({
    selector: 'my-app',
    template: `
        <div ngClass="redBorder text-primary"></div>
    `
})

// Using as string
@Component({
    selector: 'my-app',
    template: `
        <div [ngClass]="['text-primary', redBorder]"></div>
    `
})
export class MyComponent{
    redBorder = "1px solid red";
}

// Using as array ( property binding )
@Component({
    selector: 'my-app',
    template: `
        <div [ngClass]="classes"></div>
    `
})
export class MyComponent{
    classes = "redBorder";
}

// Using as object
@Component({
    selector: 'my-app',
    template: `
        <div [ngClass]="{redBorder: true, 'text-danger': textDanger}"></div>
    `
})
export class MyComponent{
    textDanger =  true;
}