Discussion About Angular 2 Directives?

Question

What are Angular Directives?

      Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Directives Types

1. Components
2. Structural Directives
3. Attribute Directives

1. Components

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

 @Component({
  selector: 'myApp',
  template: `<h1>Query Home</h1>`
})
class homePage{
}

 

2. Structural Directives

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.

Example

<div *ngIf="isPageEnable" class="app-name">Query Home</div>​

3.Attribute Directives

Attributes directives are responsible for change the appearance or behavior of an element, component, or another directive.

Example

<p appHighlight>Highlight me!</p>​

Video for Directives