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
}

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

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

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

Need a hint?

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