Component template basics in Angular

Introduction

A component template in Angular defines what the user sees on the screen. It connects the component's logic to the visual layout.

When you want to show text, images, or buttons in your app.

When you need to display data from your component to the user.

When you want to create interactive parts like forms or lists.

When you want to organize your app into small, reusable pieces.

When you want to control how your app looks and behaves.

Syntax

Angular

<component-selector> <!-- HTML elements and Angular template syntax here -->

The template uses standard HTML plus Angular's special syntax like {{ }} for showing data.

Templates are usually written inside the component file or in a separate HTML file.

Examples

Shows a heading with a dynamic name from the component.

Angular

<h1>Hello, {{name}}!</h1>

A button that runs a function when clicked.

Angular

<button (click)="sayHello()">Click me</button>

Displays a list of items using Angular's loop syntax.

Angular

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

Sample Program

This component shows a greeting with a name. When you click the button, the name changes on the screen.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `
    <h2>Welcome, {{userName}}!</h2>
    <button (click)="changeName()">Change Name</button>
  `
})
export class GreetingComponent {
  userName = 'Friend';

  changeName() {
    this.userName = 'Angular Learner';
  }
}

Important Notes

Always use semantic HTML tags for better accessibility.

Use Angular's binding syntax {{ }} to show data from the component.

Use event binding (like (click)) to respond to user actions.

Summary

Component templates define what users see and interact with.

They combine HTML with Angular's special syntax for dynamic content.

Templates connect the component's data and functions to the screen.