top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration

Discussion About Angular 2 Directives?

0 votes
81 views

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
 
posted Jan 29 by Sandeep Bedi

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button

Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...