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
}

Need a 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
}

Need a 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;
}

Need a 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;
}

Need a hint?

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