Angular 2 Directives-Attribute Directives - Angular 2

What is use of attribute directives in angular 2?


Attribute directive changes the look or behaviour of a DOM element and these directives look like regular HTML attributes in templates. ngModel directive used for two-way is an example of an attribute directive. Below are some of the other attribute directives:

  • NgSwitch: It is used whenever the user wants to display an element tree consisting of many children. Angular places only selected element tree into the DOM based on some condition.
  • NgStyle: dynamic styles can be set by using NgStyl based on the component state. Many inline styles can be set simultaneously by binding to NgStyle.
  • NgClass: It controls the look of elements by adding and removing CSS classes dynamically.


Below example describes the use of attribute directives in Angular 2:

Above code includes below configuration options:

  • User can configure index.html file using typescript version. SystemJS transpilers TypeScript to JavaScript before running the application using the transpiler option.
  • If the user does not want to transpile to JavaScript before running the application, they can see the compiler warnings and errors hidden in the browser.
  • The TypeScript generates metadata for each and every class of the code when the emitDecoratorMetadata option is set. If you don't specify this option, large amount of unused metadata will be generated which affects the file size and impact on the application runtime.
  • Angular 2 includes packages form the app folder where files will have the .ts extension.
  • Next it loads the main component file from the app folder. If main component file is not found, then it will display the error in the console.
  • When Angular calls the bootstrap function in main.ts, it reads the Component metadata, finds the 'app' selector, locates an element tag named app, and loads the application between those tags.

To run the code, TypeScript(.ts) files are needed which should be saved under the app folder.


Now create a component in TypeScript(.ts) file which creates a view for the component.



  • @Component is a decorator which makes use of configuration object for creating the component and its view.
  • Selector creates an instance of the component where it finds <my-app> tag in parent HTML.
  • Next create a directive called ShoppingListComponent which is accessed from the shopping-item.component file.


  • Local variable shopItem can be referenced in the template to get the index of an array. Angular 2 binds the model name from an array with the local variable of the template.
  • By clicking on the item value, onItemClicked() event will get activated and Angular 2 will bind the model name from an array with the local variable of the template.
  • NgSwitch directive inserts the nested elements and based on this match expression it matches the value obtained from the evaluated switch expression. It displays an element whose *ngSwitchWhen matches the current ngSwitch expression value.
  • onItemClicked() method uses local varaible 'shopItem' as parameter and displays the selected item by using the selectedItem object.


Below steps can be carried out to see how above code works:

  • Save above HTML code as index.html file as and use the above app folder which contains .ts files.
  • Open the terminal window and enter below command:

  • After few minutes, a browser tab should open and should display the output as shown below.

OR this file can be run in another way:

  • Save above HTML code as attribute_directive.html file in the server root folder.
  • Open this HTML file as http://localhost/attribute_directive.html and output as shown below will be displayed.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Angular 2 Topics