ANGULAR2 attribute-type directives

Angular2 attribute-type directives

There are three types of directives in Angular:

1.components-directives with a template. Components-directives that have templates
2.Structural Directives-change the DOM layout by adding and removing DOM elements. Structured directives-Instructions for changing the DOM layout by adding and removing DOM elements: 3.Attribute Directives-change the appearance or behavior of an element. Attribute-type directives-directives that alter the display and behavior of elements.

* * Structural directives Modify the structure of the view. For example, Ngfor and Ngif.
An attribute-type directive alters the appearance or behavior of an element. For example, built-in Ngstyle directives can modify multiple styles of an element at the same time. * * Style binding settings CSS

Style is directly bound to the CSS, but there are many inconveniences (such as multiple styles)

<p [style.background]= "' Lime '" >i am Green with envy!</p>

Property Directives

Let's take a look at the instructions:

Import {Directive, elementref, Input, Renderer} from ' @angular/core ';
@Directive ({selector: ' [Myhighlight] '})
Export class Highlightdirective {
    constructor (El:elementref, Renderer:renderer) {
       renderer.setelementstyle (el.nativeelement, ' backgroundcolor ', ' yellow ');
    }
}

Where, @Directive adorner to specify myhighlight as a property directive.
El is used to access dom,renderer to manipulate CSS styles in the DOM
Declared in the component of the use directive, used,

  declarations: [
    highlightdirective
  ],

Using in HTML

<p Myhighlight>highlight me!</p>

This P-paragraph text background color will be yellow to show about event response