YogeshChauhan . com

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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to apply style to the first-child using jQuery?jQueryHow to get ACF values from custom post type?WordPressHow to define visibility for a property in PHP?PHPWhat’s new in WordPress 5.5?WordPressHow to use data-* Attributes in HTML?HTMLWhat are “holes” in a React component?React