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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to create a circle that follows a cursor using JavaScript and CSS?CSSThe difference between Class declarations and Class expressions in JavaScriptJavaScriptAccessing and Setting features of JavaScript ObjectsJavaScriptContainers 101: What are containers?MiscellaneousAdvanced nesting in Sass (SCSS) using at-rootSCSSHow to create a simple digital clock using JavaScript?JavaScript