Component template basics in Angular - Mini Project: Build & Apply

Component template basics

📖 Scenario: You are building a simple Angular component to display a welcome message on a webpage for a small business.

🎯 Goal: Create an Angular standalone component with a template that shows a heading and a paragraph message.

📋 What You'll Learn

Create a standalone Angular component named WelcomeComponent

Add a template with a <h1> heading that says Welcome to Our Store

Add a <p> paragraph below the heading with the text We are glad to see you here!

Use the new Angular 17+ standalone component syntax

Use the @Component decorator with selector and standalone: true

💡 Why This Matters

🌍 Real World

Creating reusable UI components with templates is a core skill in Angular for building web applications.

💼 Career

Angular developers frequently create standalone components with templates to build accessible and maintainable user interfaces.

1

Create the component class

Create a standalone Angular component class named WelcomeComponent with the @Component decorator. Set the selector to 'app-welcome' and mark it as standalone: true. Do not add the template yet.

Angular

@Component({
  selector: 'app-welcome',
  standalone: true
})
export class WelcomeComponent {
  // Your code here
}

Hint

Use @Component decorator with selector and standalone: true. Define an empty class named WelcomeComponent.

2

Add the template with heading

Add a template property to the @Component decorator. Inside the template, add an <h1> element with the exact text Welcome to Our Store.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  // Add template with  here
})
export class WelcomeComponent {
}

Hint

Use backticks ` to write the template string with the <h1> element inside the @Component decorator.

3

Add a paragraph below the heading

Extend the template property to include a <p> paragraph below the <h1> with the exact text We are glad to see you here! Use a template literal with backticks.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  // Add  paragraph below  in template
})
export class WelcomeComponent {
}

Hint

Inside the template string, add the <p> element right after the <h1> element.

4

Add accessibility with aria-label

Add an aria-label attribute to the <h1> element in the template with the value 'Store welcome heading' to improve accessibility.

Angular

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  // Add aria-label to  in template
})
export class WelcomeComponent {
}

Hint

Add aria-label='Store welcome heading' inside the <h1> tag in the template string.

Practice

1. What is the main purpose of a component template in Angular?

easy

A. To style the component with CSS

B. To write backend server logic

C. To configure routing paths

D. To define the HTML structure and dynamic content users see

Solution

1. Step 1: Understand what a component template does

   A component template controls what the user sees by defining HTML and dynamic content.

2. Step 2: Compare options to this role

   Only To define the HTML structure and dynamic content users see describes this role correctly; others relate to different parts of Angular.

3. Final Answer:

   To define the HTML structure and dynamic content users see -> Option D

4. Quick Check:

   Component template = HTML + dynamic content [OK]

Hint: Templates show what users see and interact with [OK]

Common Mistakes:

• Confusing templates with backend logic
• Thinking templates handle styling only
• Mixing templates with routing configuration

2. Which of the following is the correct syntax to bind a component property title to an h1 tag in the template?

easy

A. {{ title }}

B. [title]

C. (title)

D. { title }

Solution

1. Step 1: Recall Angular interpolation syntax

   Angular uses double curly braces {{ }} to display component properties in templates.

2. Step 2: Match options with correct syntax

   Only

   {{ title }}

   uses {{ title }} correctly; others use invalid or incorrect brackets.

3. Final Answer:

   <h1>{{ title }}</h1> -> Option A

4. Quick Check:

   Interpolation uses {{ }} [OK]

Hint: Use {{ }} to show variables in templates [OK]

Common Mistakes:

• Using square brackets [] for interpolation
• Using parentheses () instead of curly braces
• Forgetting to use double curly braces

3. Given this component template snippet:

<button (click)="increment()">Add</button>
<p>Count: {{ count }}</p>

And the component code:

count = 0;
increment() { this.count++; }

What will be displayed after clicking the button three times?

medium

A. Count: 3

B. Count: 0

C. Count: 1

D. Count: undefined

Solution

1. Step 1: Understand the initial state and method

   The count starts at 0. Each click calls increment(), which adds 1 to count.

2. Step 2: Calculate count after three clicks

   After 3 clicks, count = 0 + 3 = 3, so template shows 'Count: 3'.

3. Final Answer:

   Count: 3 -> Option A

4. Quick Check:

   3 clicks increment count to 3 [OK]

Hint: Click calls method that adds 1 each time [OK]

Common Mistakes:

• Thinking count resets after each click
• Confusing event binding syntax
• Ignoring the initial count value

4. Identify the error in this Angular template snippet:

<div>
  <p>User: {{ userName }}</p>
  <button (click)="updateName('Alice')">Change Name</button>
</div>

Assuming userName and updateName exist in the component, what is wrong?

medium

A. The event binding syntax (click) is incorrect

B. The template is correct; no errors

C. The method call inside (click) should not have quotes around 'Alice'

D. Interpolation {{ userName }} should be inside square brackets

Solution

1. Step 1: Check event binding syntax

   (click) is the correct way to bind click events in Angular templates.

2. Step 2: Verify method call and interpolation

   Calling updateName('Alice') with quotes is valid. Interpolation uses {{ }} correctly.

3. Final Answer:

   The template is correct; no errors -> Option B

4. Quick Check:

   Event binding and interpolation syntax are correct [OK]

Hint: Event binding uses (event)="method()" with quotes [OK]

Common Mistakes:

• Removing quotes from string arguments in method calls
• Using square brackets for interpolation
• Miswriting event binding syntax

5. You want to display a list of items stored in the component property items = ['Apple', 'Banana', 'Cherry']. Which template snippet correctly shows each item in an unordered list?

hard

A.
{{ items }}

B.
{{ item }}

C.
{{ item }}

D.
{{ item }}

Solution

1. Step 1: Recall correct *ngFor syntax

   The correct syntax is *ngFor="let variable of collection" to loop over items.

2. Step 2: Evaluate each option

   Only <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> uses the correct syntax; the others use invalid variations like "items as item", reversed order with "in", or missing "let".

3. Final Answer:

   <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> -> Option C

4. Quick Check:

   *ngFor="let x of y" loops correctly [OK]

Hint: Use *ngFor="let item of items" to loop lists [OK]

Common Mistakes:

• Swapping 'of' with 'as' or 'in'
• Using plural variable names incorrectly
• Forgetting 'let' keyword in *ngFor