YogeshChauhan.com
Five common features of Angular template syntax (with examples)
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

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF?

You might also like these

Debugging in WordPress Part 1: WP_DEBUGWordPressHow to get category name using post id in WordPress?WordPressHow to merge arrays in JavaScript?JavaScriptLEFT JOIN in PostgresPostgresUnderstand Inheritance in PHP in this Basic Example (For Beginners)PHPHow to remove a specific item from an array in JavaScript?JavaScript