Angular2 's attribute type directive

How to start: requirements – First to figure out what we do. How it is used – what it looks like. What scenario is used. How it is used. Write each feature in unit test, then code it, pass the code of the Unit test, and then do the unit test of the next feature code.

The event that binds the host element, when the event is bound, snaps to the event source $event (the table instruction, which is the focus of the attribute-type Directive). angular directive can be divided into three kinds of component attribute type instruction structure type instruction

Let's learn about the attribute-type directives today.
The attribute-type directive adds the behavior to the existing element.
An attribute -type directive is used to alter the appearance or behavior of a DOM element. Create an attribute-type directive – Primary application

necessary to create an attribute-type directive yourself:

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 ');
    }
}

The import statement specifies some of the symbols imported from the core library of Angular. The directive provides @directive adorner functionality. The elementref is injected into the instruction constructor. This allows the code to access the DOM elements. Input communicates data from a binding expression to an instruction. Renderer allows the code to change the style of DOM elements.

The @Directive adorner requires a CSS selector (property name plus square brackets-[attr]) to identify the HTML associated to this directive from the template.
The selector for the directive is [Myhighlight],angular will find all elements with the Myhighlight attribute in the template. Elementref is a service that gives us the ability to access DOM elements directly through its Nativeelement property. The renderer service allows you to set the style of an element through code. don't forget to add this directive to the declarations array of the ngmodule metadata. responding to user-raised events – Advanced apps

Demand
Displays the background color of a word when the mouse hovers over an element. Detects when a user's mouse enters and leaves this element. Respond to these actions by setting and clearing high light colors.

Implement
The method to invoke when applying the @hostlistener decoration to an event trigger.

@HostListener (' MouseEnter ') Onmouseenter () {/
* ... */
}

@HostListener (' MouseLeave ') OnMouseLeave () {
/* . . . */
}

@HostListener adorner refers to the host element of a property-type directive, in this case

。

The way a DOM element is manipulated directly attaches an event listener to the host DOM element.
Note: The correct writing listener and the need to remove the listener when the instruction is destroyed, or it will cause a memory leak.

Using data binding directives to pass values, we call the @input () adorner when defining this property.

@Input (' myhighlight ') highlightcolor:string;  Property 
<p [myhighlight]= "Color" >highlight me!</p>//page

write it in the back .

GitHub last episode everyone's power to engage in a front-end interview questions, which are all the questions encountered during the interview and some of the learning materials, interested to pay attention to. If you are interested in joining us, please leave a message in the project. The project can also be viewed on gitbook.

Interviewlibrary-github
Interviewlibrary-gitbook

write it in the back .

GitHub last episode everyone's power to engage in a front-end interview questions, which are all the questions encountered during the interview and some of the learning materials, interested to pay attention to. If you are interested in joining us, please leave a message in the project. The project can also be viewed on gitbook.

Interviewlibrary-github
Interviewlibrary-gitbook