Angular provide a number of built in directives, which are attributes we add to our HTML elements that give us a dynamic behavior.
Angular built in directives are very powerful and very important part for every Angular app out there. Therefore, and without any further ado let us dive into it.

Built in directives

NgIf

The ngIf directive is used when you want to show or hide an element based on a Boolean condition. Therefor the element will be removed from the DOM if the expression returns false.
Examples:



<div *ngIf="false"></div>


<!-- never displayed -->


<div *ngIf="a>b"></div>


<!-- displayed only if a is more than b -->


<div *ngIf="str=='yes'"></div>


<!-- displayed only if str is string 'yes'-->


<div *ngIf="myFunc()"></div>


<!-- displayed only if myFunc() return true -->

NgSwitch

If you worked with the switch statement before than you will have a strong feeling of deja Vu here. Because how the ngSwitch directive works is similar to how the switch statement works which is by allowing a single evaluation of an expression, and then display nested elements based on the value that resulted from that evaluation.
Once we have the results we can:

  • Do some work with the results, using the ngSwtichCase.
  • Handle the unknown results with the ngSwitchDefault.

Examples:



<div class="container" [ngSwitch]="myVar">
  

<div *ngSwitchCase="'A'">Var is A</div>


  

<div *ngSwitchCase="'B'">Var is B</div>


  

<div *ngSwitchCase="'C'">Var is C</div>


  

<div *ngSwitchDefault>Var is something else 
    other than A or B</div>


</div>


The ngSwitchDefault is optional as if we don’t use it nothing will render when myVar failed to match any of the expected values.

programming 4th of July shirt

For only 12.95$
You can get this amazing coder/programmer shirt to celebrate this 4th of July independence day in Java Style 😜😆.

If you like to help us keep this blog alive than click on the image or this link to purchase it, it cost only 12.95$ .
Happy independence day

NgStyle

With the NgStyle you can set a given DOM element’s CSS properties from Angular expression. Which also can be done in other way using the [style.cssproperty]='value'.
Example:



<div [style.background-color]="'yellow'"></div>


However comparing to the syntax above what is unique about NgStyle is its ability to set multiple properties to a static or dynamic values.
Example:



<div [ngStyle]="{color:'black','background-color':'myColor'}"></div>


NgClass

The NgClass directive allows you to dynamically set and change the CSS classes for a given DOM element based on a boolean expression.
Example:

/* let us assume that we have this CSS class */
.bordered {
border: 1px solid thin black;
background-color: #eee;
} 
<!-- and a boolean variable isBordered -->


<div [ngClass]="bordered:isBordered">the class bordered will applied
  only if isBordered returned true</div>


4th of july independence day programmer shirt

For only 12.95$
You can get this amazing coder/programmer shirt to celebrate this 4th of July independence day in Java Style 😜😆.

If you like to help us keep this blog alive than click on the image or this link to purchase it, it cost only 12.95$ .
Happy independence day

NgFor

the role of this directive is to repeat a given DOM element (or a collection of DOM elements) by looping through an element on each iteration.
Syntax: *ngFor='let item of items'

  • the let syntax specifies a (template) variable that is receiving each element of the items array.
  • the items is a collection variable from your controller.

example:

this.colors=['black','green','red'];


<ol *ngFor="let color of colors">


<li>{{color}}</li>


</ol>


the expected output is:

  1. black
  2. green
  3. red

NgNonBindable

We use the NgNonBindable when we want to tell Angular not to bind a particular section of our page.
Example:

this.myVar=5;


<div ngNonBindable>{{myVar}}</div>


<!-- output should be: {{myVar}} and not the value of myVar -->

Wrapping up

In the end I want to give credit to the ng-book: The Complete Guide to Angular 4 which inspired me to write this article so, if you like to get the full code examples and invest in your future as a developer I highly suggest that you read the book.
I hope that you find this article helpful as it is the third article in a series of articles with the title of Angular for beginners which will aim to help you get the most of your Angular learning journey. So I highly suggest that you check the TypeScript and Angular Architecture articles.
If you enjoyed the post and want to show appreciation to the writer and the blog as a whole, just subscribe to our newsletter to stay updated with our content and share, like and follow us on social media (links below in the footer).
Take Care !! Until we meet again in another post from TechTalko.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.