Yogesh Chauhan's Blog

Five common features of Angular template syntax (with examples)

in Angular on May 11, 2020

We learned about components and templates in these article series:

Introduction To Components And Templates Part 1: Component Metadata

Introduction To Components And Templates Part 2: Templates And Views

Introduction To Components And Templates Part 3: Data Binding

Introduction To Components And Templates Part 4: Pipes And Directives

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"

output: products
output: 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:

output: products list
output: products list

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.

output: products list with links
output: products list with links

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".

output: products list with description
output: products list with 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:

output: products list with share buttons
output: products list with share buttons

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

output after button click
output after button click

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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to use HTML picture Tag?HTMLfor @each loop in SCSSSCSSHow to show widgets on the Appearance tab in WordPress?WordPressHow to concatenate variable with string in Swift?SwiftThe Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScript