Angular 7: Built-in Directives

Introduction

Angular provides a number of built-in directives, which are attributes we add to our HTML elements that give us dynamic behavior. In this chapter, we’re going to cover each built-in directive and show you examples of how to use them.

By the end of this chapter you’ll be able to use the basic built-in directives that Angular offers.

   npm install
   npm start

NgIf

The ngIf directive is used when you want to display or hide an element based on a condition. The condition is determined by the result of the expression that you pass into the directive.

If the result of the expression returns a false value, the element will be removed from the DOM.

Some examples are:

{lang=html,line-numbers=off}
<div *ngIf=”false”></div> <div *ngIf=”a > b”></div> <div *ngIf=”str == ‘yes’”></div> <div *ngIf=”myFunc()”></div>

NgSwitch

Sometimes you need to render different elements depending on a given condition.

When you run into this situation, you could use ngIf several times like this:

{lang=javascript,line-numbers=off}
<div class="container"> <div *ngIf=”myVar == ‘A’“>Var is A</div> <div *ngIf=”myVar == ‘B’“>Var is B</div> <div *ngIf=”myVar != ‘A’ && myVar != ‘B’“>Var is something else</div> </div>

But as you can see, the scenario where myVar is neither A nor B is verbose when all we’re trying to express is an else.

To illustrate this growth in complexity, say we wanted to handle a new value C.

In order to do that, we’d have to not only add the new element with ngIf, but also change the last case:

{lang=javascript,line-numbers=off}
<div class="container"> <div *ngIf=”myVar == ‘A’“>Var is A</div> <div *ngIf=”myVar == ‘B’“>Var is B</div> <div *ngIf=”myVar == ‘C’“>Var is C</div> <div *ngIf=”myVar != ‘A’ && myVar != ‘B’ && myVar != ‘C’“>Var is something else</div> </div>

For cases like this, Angular introduces the ngSwitch directive.

If you’re familiar with the switch statement then you’ll feel very at home.

The idea behind this directive is the same: allow a single evaluation of an expression, and then display nested elements based on the value that resulted from that evaluation.

Once we have the result then we can:

• Describe the known results, using the ngSwitchCase directive
• Handle all the other unknown cases with ngSwitchDefault

Let’s rewrite our example using this new set of directives:

{lang=javascript,line-numbers=off}
<div class=”container” [ngSwitch]=”myVar”> <div *ngSwitchCase=”‘A’“>Var is A</div> <div *ngSwitchCase=”‘B’“>Var is B</div> <div *ngSwitchDefault>Var is something else</div> </div>

Then if we want to handle the new value C we insert a single line:

{lang=javascript,line-numbers=off}
<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</div> </div>

And we don’t have to touch the default (i.e. fallback) condition.

Having the ngSwitchDefault element is optional. If we leave it out, nothing will be rendered when myVar fails to match any of the expected values.

You can also declare the same *ngSwitchCase value for different elements, so you’re not limited to matching only a single time. Here’s an example:

    <h4 class="ui horizontal divider header">
      Current choice is {{ choice }}
    </h4>
    
    <div class="ui raised segment">
      <ul [ngSwitch]="choice">
        <li *ngSwitchCase="1">First choice</li>
        <li *ngSwitchCase="2">Second choice</li>
        <li *ngSwitchCase="3">Third choice</li>
        <li *ngSwitchCase="4">Fourth choice</li>
        <li *ngSwitchCase="2">Second choice, again</li>
        <li *ngSwitchDefault>Default choice</li>
      </ul>
    </div>
    
    <div style="margin-top: 20px;">
      <button class="ui primary button" (click)="nextChoice()">
        Next choice
      </button>
    </div>

In the example above when the choice is 2, both the second and fifth lis will be rendered.

NgStyle

With the NgStyle directive, you can set a given DOM element CSS properties from Angular expressions.

The simplest way to use this directive is by doing [style.<cssproperty>]="value". For example:

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

This snippet is using the NgStyle directive to set the background-color CSS property to the literal string 'yellow'.

Another way to set fixed values is by using the NgStyle attribute and using key value pairs for each property you want to set, like this:

    <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
      Uses fixed white text on blue background
    </div>

Here we are setting both the color and the background-color properties.

But the real power of the NgStyle directive comes with using dynamic values.

In our example, we are defining two input boxes with an apply settings button:

    <div class="ui input">
      <input type="text" name="color" value="{{color}}" #colorinput>
    </div>
    
    <div class="ui input">
      <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
    </div>
    
    <button class="ui primary button" (click)="apply(colorinput.value, fontinput.value)">
      Apply settings
    </button>