Template expressions and statements in Angular - Mini Project: Build & Apply

Angular Template Expressions and Statements

📖 Scenario: You are building a simple Angular component to display a product's name and price. You want to practice using Angular template expressions to show data and template statements to respond to user clicks.

🎯 Goal: Create an Angular standalone component that shows a product's name and price using template expressions. Add a button that, when clicked, increases the product's price by 10 using a template statement.

📋 What You'll Learn

Create a standalone Angular component named ProductComponent

Define a product object with name and price properties

Use template expressions to display the product's name and price in the template

Add a button with a click event that increases the product's price by 10

Use Angular's @Component decorator with standalone: true

💡 Why This Matters

🌍 Real World

Displaying and updating product information dynamically in an online store or catalog.

💼 Career

Understanding Angular template expressions and statements is essential for building interactive user interfaces in modern web applications.

1

Create the product data object

Create a standalone Angular component named ProductComponent. Inside the component class, define a product object with name set to 'Coffee Mug' and price set to 15.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  standalone: true,
  template: ``,
})
export class ProductComponent {
  // Your code here
}

Hint

Define the product object inside the component class with the exact properties and values.

2

Add a config variable for price increment

Inside the ProductComponent class, add a variable named priceIncrement and set it to 10.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  standalone: true,
  template: ``,
})
export class ProductComponent {
  product = { name: 'Coffee Mug', price: 15 };
  // Add priceIncrement variable below
  // Your code here
}

Hint

Just add a new variable priceIncrement with value 10 inside the class.

3

Display product name and price using template expressions

In the component's template string, use Angular template expressions to display the product's name inside an <h2> and the product's price inside a <p> with the text Price: $ followed by the price.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  standalone: true,
  template: `
    
  `,
})
export class ProductComponent {
  product = { name: 'Coffee Mug', price: 15 };
  priceIncrement = 10;
}

Hint

Use double curly braces {{ }} to show product.name and product.price inside the template.

4

Add a button with a click event to increase price

In the component's template, add a <button> with the text Increase Price. Use a template statement with (click) to increase product.price by priceIncrement when the button is clicked.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  standalone: true,
  template: `
    {{ product.name }}
    Price: ${{ product.price }}
    
  `,
})
export class ProductComponent {
  product = { name: 'Coffee Mug', price: 15 };
  priceIncrement = 10;
}

Hint

Add a button with (click) event that adds priceIncrement to product.price.

Practice

1. What is the purpose of using {{ expression }} in an Angular template?

easy

A. To display the value of the expression in the HTML

B. To run a function when a button is clicked

C. To define a new component

D. To import external stylesheets

Solution

1. Step 1: Understand template expressions

   Template expressions inside {{ }} are used to show data or values in the HTML view.

2. Step 2: Differentiate from statements

   Statements run code on events, but expressions only display values.

3. Final Answer:

   To display the value of the expression in the HTML -> Option A

4. Quick Check:

   Template expressions = display data [OK]

Hint: Remember {{ }} always shows data, not runs code [OK]

Common Mistakes:

• Confusing expressions with event handlers
• Thinking {{ }} runs functions on click
• Using {{ }} to import files

2. Which of the following is the correct syntax to bind a click event in an Angular template?

easy

A. <button <click>="doSomething()">Click</button>

B. <button (click)="doSomething()">Click</button>

C. <button [click]="doSomething()">Click</button>

D. <button {click}="doSomething()">Click</button>

Solution

1. Step 1: Recall Angular event binding syntax

   Angular uses parentheses around event names to bind events, like (click).

2. Step 2: Check each option

   Only <button (click)="doSomething()">Click</button> uses the correct (click) syntax with quotes and parentheses.

3. Final Answer:

   <button (click)="doSomething()">Click</button> -> Option B

4. Quick Check:

   Event binding uses (event) syntax [OK]

Hint: Event bindings always use parentheses (event) [OK]

Common Mistakes:

• Using square brackets instead of parentheses
• Using curly braces instead of parentheses
• Missing quotes around the method call

3. Given the component property count = 5, what will be displayed by this template snippet?
<div>Count: {{ count + 3 }}</div>

medium

A. Count: 8

B. Count: count + 3

C. Count: 53

D. Count: undefined

Solution

1. Step 1: Evaluate the expression inside {{ }}

   The expression is count + 3. Since count is 5, the expression becomes 5 + 3.

2. Step 2: Calculate the result

   5 + 3 equals 8, so the displayed text is "Count: 8".

3. Final Answer:

   Count: 8 -> Option A

4. Quick Check:

   5 + 3 = 8 [OK]

Hint: Expressions inside {{ }} calculate values immediately [OK]

Common Mistakes:

• Treating expression as a string literal
• Concatenating numbers as strings
• Expecting undefined if property missing

4. Identify the error in this Angular template snippet:
<button (click)="increment">Add</button>
Assuming the component has a method increment().

medium

A. Method name should be in double curly braces

B. Using square brackets instead of parentheses

C. Missing parentheses after method name in event binding

D. No error, syntax is correct

Solution

1. Step 1: Check event binding syntax

   The event binding calls a method on click. It should include parentheses to invoke the method, like increment().

2. Step 2: Identify the missing parentheses

   The code uses increment without parentheses, so the method won't be called.

3. Final Answer:

   Missing parentheses after method name in event binding -> Option C

4. Quick Check:

   Call methods with () in (event) bindings [OK]

Hint: Always add () to call methods in (event) bindings [OK]

Common Mistakes:

• Omitting parentheses after method name
• Using {{ }} inside event bindings
• Confusing event and property bindings

5. You want to display a user's full name in the template using {{ }}, but only if both firstName and lastName exist. Which template expression correctly shows the full name or 'Guest' if either is missing?

hard

A. {{ firstName + ' ' + lastName || 'Guest' }}

B. {{ firstName || lastName ? firstName + ' ' + lastName : 'Guest' }}

C. {{ firstName && lastName && firstName + ' ' + lastName || 'Guest' }}

D. {{ firstName && lastName ? firstName + ' ' + lastName : 'Guest' }}

Solution

1. Step 1: Understand the condition

   We want to show full name only if both firstName and lastName exist (are truthy).

2. Step 2: Analyze each option

   {{ firstName && lastName ? firstName + ' ' + lastName : 'Guest' }} uses firstName && lastName ? fullName : 'Guest', which correctly checks both exist before concatenating. Others either use OR or incorrect logic.

3. Final Answer:

   {{ firstName && lastName ? firstName + ' ' + lastName : 'Guest' }} -> Option D

4. Quick Check:

   Use && with ?: for conditional display [OK]

Hint: Use && with ?: to check both values before display [OK]

Common Mistakes:

• Using || instead of && to check both values
• Omitting the conditional operator
• Relying on || alone which may show partial names