Five common features of Angular template syntax (with examples)

We learned about components and templates in these article series:

Let's take a look at the 5 common features of Angular's template syntax in this article.

1. *ngFor

To iterate over the predefined list, we use the *ngFor directive.

For example, this is our predefined list in products.ts in our angular app.

export const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

Each product in the list displays the same way, one after another on the page.

We can display the list of products using that data.

To iterate over the predefined list of products, put the *ngFor directive on a <div>, as follows:

<h2>List of Products</h2>

<div *ngFor="let product of products">
</div>

With *ngFor, the div repeats for each product in the list.

It will display output like this: Just "Products"

💡 Directives with an asterisk, *, are structural directives. So, *ngFor is a "structural directive".

💡 Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached.

2. Interpolation {{ }}

To display the names of the products, we use the interpolation syntax {{ }}.

Interpolation renders a property's value as text. Inside the div, add an h3 to display the interpolation of the product's name property:

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>

The preview pane immediately updates to display the name of each product in the list. Like this screenshot below:

3. Property binding [ ]

To make each product name a link to product details, add the a element and set its title to be the product's name by using the property binding [ ] syntax, as follows:

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

In the preview pane, hold the pointer over a product name to see the bound name property value, which is the product name plus the word "details".

Interpolation {{ }} lets you render the property value as text; property binding [ ] lets you use the property value in a template expression.

4. *ngIf

Add the product descriptions. On the p element, use an *ngIf directive so that Angular only creates the p element if the current product has a description.

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>

The app now displays the name and description of each product in the list.

Notice that the final product does not have a description paragraph.

💡 Because the product's description property is empty, Angular doesn't create the p element—including the word "Description".

5. Event binding ( )

Add a button so users can share a product with friends.

Bind the button's click event to the share() method.

Event binding uses a set of parentheses, ( ), around the event.

Take a look in the following example and button element:

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>

Each product now has a "Share" button now:

Test the "Share" button by clicking on it. It will show the following alert:

The app now has a product list and sharing feature.

In the process, we've learned to use five common features of Angular's template syntax.

Credit: Angular.io

Share this post