Directives in Angulars

Angular is providing directives to extend the functionality | behavior of
 html.

Angular directives looks like html tag (or) attribute

 <h2>..</h2>   --> html tag


 <app-root>    -->component directive
                  [looks like html tag]
 <app-body>


 <font size="..">
          |
     html attribute

 <input .. [(ngModel)]="price">
               |
          attribute directive [looks like html attribute]

 <td *ngIF="..">
        |
   structural directive[looks like html attribute]

 In other words, we can say that the directives are basically used to extend the power of HTML attributes and to change the appearance or behavior of a DOM element.

Angular supports 3 types of directives
 1.component directive
    ->directive based on a template is called "component directive"
    ->component directive name is based on selector, component can be
      referenced from markup using selector
    ->component directive acts like a custom html tag

 2.attribute directive
    ->directive looks html element attribute is called
      "attribute directive"
    ->attribute directive will apply styling (or) extend functionality
      of html element
        eg: ngModel,ngStyle,ngClass,..

 3.structural directive
      ->directive prefixed with asterik[*] symbol is called
        "structural directive"
      ->structural directive can be used to apply control stat to
        html element
             eg: *ngIf,*ngSwitchCase,*ngFor
      ->structural directive will add|remove html element from
        browser DOM dynamically

eg:
        <table *ngIF="prods.length>0">
         <tr>                   |
       <th>pid</td>          true--table will be loaded into browser dom for display
           ..                         false--table will not be loaded into browser dom,so it will 
         </tr>                      not be shown
           ...                        |
        </table>          this provides better performance

In the next article we will deal with each example