Directives

Question 1

What is a Directive

Answer 1

It is a function that executes when Angular finds it in DOM

Question 2

Examples of Directives

Answer 2

ngRepeat, ngIf, ngFor

Question 3

Types of Directives

Answer 3

Structural and Attribute

Question 4

Structural Directive

Answer 4

Create or destroy DOM elements
hide, show, enable, disable
ngIf, ngFor, ngSwitch

Question 5

Attribute Directive

Answer 5

Change the state or behavior of DOM elements, component or another directive
ngClass - Add or remove several css classes simultaneously
ngStyle - set multiple inline styles simultaneously
ngModel - display data and update data when user makes changes

Question 6

[ngClass]=”{‘blue’=true, ‘yellow’=false}” - Attribute Directive

Answer 6

Adds the class blue and removes class yellow if present.
To add or remove a single class use class binding rather than ngClass
[class.sale] = "onSale" like boolean/undefined/null
[class]="classExpression" like string, object, array

Question 7

{{show ? ‘hide’ : ‘show’}}
show = {{show}}
<br></br>
<div>Text to show</div>

Answer 7

It changes the structure of DOM tree and hence it is Structural Directive.

Question 8

Custom Directive

Answer 8

First import {Directive, ElementRef} from ‘@angular/core’;
@Directive({
selector:’[my-error]’
})

export class MyErrorDirective{
    constructor(elr:ElementRef){
        elr.nativeElement.style.background='red';
    }
}

Now this directive can be used in any component

Question 9

How is the custom directive used?

Answer 9

After creating the directive include it in app.module.ts file in @NgModule–> declarations

Question 10

Can modules have their own attribute directives

Answer 10

Yes, RouteModule, FormModule has their own attribute directives.

Question 11

[(ngModel)]

Answer 11

Two way data binding
It is part of FormsModule (include this in app component)

without ngModel example:

with ngModel example:

Question 12

Useful site

Answer 12

https://www.sitepoint.com/practical-guide-angular-directives/

Question 13

When to use ngStyle directive?

Answer 13

Most styles can be added simply to the HTML directly, for those we can simply add them to the class property, and no special Angular functionality is needed.

Many state styles can be used using browser-supported pseudo-class selectors such as :focus, we should prefer those conventional solutions for those cases.

For state styles that don’t have a pseudo-class selector linked to it, its best to go with ngClass.

If the ngClass expressions get too big, it’s a good idea to move the calculation of the styles to the component class.

Only for situations where we have a dynamically calculated embedded style should we use ngStyle, this should be rarely needed