Templates

Component templates aren't just static HTML— they can use data from your component class and set up handlers for user interaction.

Showing dynamic text

In Angular, a binding creates a dynamic connection between a component's template and its data. This connection ensures that changes to the component's data automatically update the rendered template.

You can create a binding to show some dynamic text in a template by using double curly-braces:

      
@Component({  selector: 'user-profile',  template: `<h1>Profile for {{userName()}}</h1>`,})export class TodoListItem {  userName = signal('pro_programmer_123');}
    

When Angular renders the component, you see:

      
<h1>Profile file pro_programmer_123</h1>
    

Angular automatically keeps the binding up-to-date when the value of the signal changes. Building on the example above, if we update the value of the userName signal:

      
this.userName.set('cool_coder_789');
    

The rendered page updates to reflect the new value:

      
<h1>Profile file cool_coder_789</h1>
    

Setting dynamic properties and attributes

Angular supports binding dynamic values into DOM properties with square brackets:

      
@Component({  /*...*/  // Set the `disabled` property of the button based on the value of `isAccountDisabled`.  template: `<button [disabled]="isValidUserId()">Save changes</button>`,})export class UserProfile {  isValidUserId = signal(false);}
    

You can also bind to HTML attributes by prefixing the attribute name with attr.:

      
<!-- Bind the `role` attribute on the `<ul>` element to value of `listRole`. --><ul [attr.role]="listRole()">
    

Angular automatically updates DOM properties and attribute when the bound value changes.

Handling user interaction

Angular lets you add event listeners to an element in your template with parentheses:

      
@Component({  /*...*/  // Add an 'click' event handler that calls the `cancelSubscription` method.   template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,})export class UserProfile {  /* ... */    cancelSubscription() { /* Your event handling code goes here. */  }}
    

If you need to pass the event object to your listener, you can use Angular's built-in $event variable inside the function call:

      
@Component({  /*...*/  // Add an 'click' event handler that calls the `cancelSubscription` method.   template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,})export class UserProfile {  /* ... */    cancelSubscription(event: Event) { /* Your event handling code goes here. */  }}
    

Control flow with @if and @for

You can conditionally hide and show parts of a template with Angular's @if block:

      
<h1>User profile</h1>@if (isAdmin()) {  <h2>Admin settings</h2>  <!-- ... -->}
    

The @if block also supports an optional @else block:

      
<h1>User profile</h1>@if (isAdmin()) {  <h2>Admin settings</h2>  <!-- ... -->} @else {  <h2>User settings</h2>  <!-- ... -->  }
    

You can repeat part of a template multiple times with Angular's @for block:

      
<h1>User profile</h1><ul class="user-badge-list">  @for (badge of badges(); track badge.id) {    <li class="user-badge">{{badge.name}}</li>  }</ul>
    

Angular's uses the track keyword, shown in the example above, to associate data with the DOM elements created by @for. See Why is track in @for blocks important? for more info.

Next Step

Now that you have dynamic data and templates in the application, it's time to learn how to enhance templates by conditionally hiding or showing certain elements, looping over elements, and more.