Angular 2 Built-in Directives - lishman.io
lishman.io Loading..
Style: Blog or IDE

Angular 2 Built-in Directives

See how Angular uses the ngIf, ngSwitch, ngFor, ngClass and ngStyle directives to transform the DOM when a template is rendered.

Updated Jan 2017, Angular version 2.4.x

Directives

You can learn about each of the built-in directives by clicking the links below, or see them in action in the example which follows.

  • ngIf adds and removes elements in the DOM based on the results of an expression.
  • ngSwitch displays one element (and its children) from a set of possible options, based on some condition.
  • ngFor is a repeater directive which outputs a list of elements by iterating over an array.
  • ngClass adds and removes CSS classes on an element.
  • ngStyle sets CSS styles on an HTML element conditionally.

Example

Let's take look at this simple voting app which makes use of the built-in directives.

Loading...

The first ngFor directive iterates over a list of candidates which are retrieved from a service. The candidate name is used as the button label, and index identifies the candidates position in the array when a button is clicked.

The second ngFor displays the colored blocks by looping over an array which is initialized with the number of votes for each candidate. The color of the blocks is determined by an ngClass directive. The template expression in quotes returns first, last or other which correspond to the class names in the styles property.

We use ngStyle to change the appearance of the leading candidates vote count. When the candidate is winning then the font-weight is changed to bold.

Finally, when we move the mouse over the colored blocks we display some additional information about the candidate. Here we use an ngSwitch directive to determine which message should be display.

voter.component.ts x
Loading...

Showing and Hiding Elements

Quick Tip

In the text below, when you see a word or phrase with this color, click on it to highlight the source code.

Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

There are several ways to show and hide elements on a page. Let's look at a few of them.

ngIf adds or removes an element subtree (an element and its children) in the DOM. In this example, the parent div has zero children when ngIf is false. Try it yourself in the application below.

When we set the hidden property to a truthy value, the element is hidden but remains in the DOM. The same is true when display is set to none using a style binding.

Setting the visibility style to hidden also hides the element but still takes up space on the page.

ng-style.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Where Next?

The Directives

To learn more about the individual built-in directives, take a look at these tutorials.

  • ngIf adds and removes elements in the DOM based on the results of an expression.
  • ngSwitch displays one element (and its children) from a set of possible options, based on some condition.
  • ngFor is a repeater directive which outputs a list of elements by iterating over an array.
  • ngClass adds and removes CSS classes on an element.
  • ngStyle sets CSS styles on an HTML element conditionally.

More Tutorials

To find out more about Angular components, check out these tutorials.

  • Templates - introduction to inline and external templates.
  • Interpolation - use curly braces and template expressions to output data.
  • Property Binding - update standard properties on the DOM using template expressions.
  • Event Binding - detect standard DOM events and execute template statements.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Input Binding - bind to <input> fields such as text, textarea, checkbox, radio and select.
  • Component Input Output - use @Input and @Output to pass data in to and out of a component.