What is Template in Angular Component: Simple Explanation and Example

In Angular, a template is the HTML part of a component that defines what the user sees on the screen. It controls the layout and structure by combining HTML with Angular's special syntax to display data and respond to user actions.

How It Works

Think of an Angular component as a small machine that shows something on your webpage. The template is like the blueprint or the design of what this machine will display. It tells the browser what to draw, where to put text, buttons, images, and how to arrange them.

Inside the template, you can use normal HTML tags, but also special Angular features like {{ }} to show data from the component's code, or (click) to react when a user clicks a button. This way, the template connects the look (HTML) with the logic (TypeScript) behind the scenes.

Imagine you have a recipe card (the template) that tells you how to prepare a dish (the component). The card shows the steps and ingredients (HTML and Angular syntax), and the kitchen (component code) provides the ingredients and tools to make the dish come alive.

Example

This example shows a simple Angular component with a template that displays a greeting message and a button. When you click the button, it changes the message.

typescript

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

@Component({
  selector: 'app-greeting',
  template: `
    <h1>{{ message }}</h1>
    <button (click)="changeMessage()">Change Message</button>
  `
})
export class GreetingComponent {
  message = 'Hello, welcome!';

  changeMessage() {
    this.message = 'You clicked the button!';
  }
}

Output

<h1>Hello, welcome!</h1>
<button>Change Message</button>

When to Use

Use a template in an Angular component whenever you want to show something on the screen. It is the place to define the visual part of your app, like forms, lists, buttons, or any content users interact with.

Templates are essential for building user interfaces that update dynamically based on user actions or data changes. For example, showing a list of products, displaying user profiles, or creating interactive dashboards all rely on templates.

Whenever you want to connect your app's data and logic with what the user sees, you use a template inside a component.

Key Points

• A template defines the HTML structure and layout of an Angular component.
• It uses Angular syntax like interpolation ({{ }}) and event binding ((click)) to connect UI with component logic.
• Templates control what users see and how they interact with the app.
• Every Angular component has one template, either inline or in a separate file.

Key Takeaways

A template is the HTML part of an Angular component that shows content to users.

Templates use Angular syntax to display data and handle user actions.

Every Angular component needs a template to define its user interface.

Templates connect the component’s logic with what appears on the screen.

Use templates to build dynamic and interactive parts of your Angular app.