Angular Templates And Template Expressions Complete Guide

Step 1: Set Up Your Angular Project

First, you need to set up your Angular project if you haven't already. You can do this using the Angular CLI (Command Line Interface).

Open your terminal or command prompt and run:

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve

After running ng serve, the app should be visible at http://localhost:4200/.

Step 2: Generate a New Component

Next, generate a new component using Angular CLI. For this example, let’s create a person component.

ng generate component person

The Angular CLI creates the files person.component.ts, person.component.html, person.component.css, and person.component.spec.ts in the src/app/person directory, along with updating the app.module.ts file to include the PersonComponent.

Step 3: Work on the Component Logic

Now let's modify the logic in person.component.ts to include some properties and methods that we can then use in the component’s template.

// src/app/person/person.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent {
  name: string = "John Doe";
  age: number = 30;
  isStudent: boolean = true;
  
  get greeting() {
    return `Hello, my name is ${this.name}.`;
  }

  greet(name: string) {
    return `Greetings, ${name}!`;
  }

  increaseAge(increment: number) {
    this.age += increment;
  }
}

Step 4: Create the Template and Use Expressions

Edit person.component.html to include HTML elements and bind them to the properties of our component using Angular’s template syntax.

Template expressions are placed within double curly braces ({{ }}) and can contain any Angular expression that returns a value. They allow us to display computed values in the view.

<!-- src/app/person/person.component.html -->
<div>
  <p>Name: {{ name }}</p> <!-- interpolation for displaying the name -->
  <p>Age: {{ age }}</p>   <!-- interpolation for displaying the age -->
  <p *ngIf="isStudent">Is Student: {{ isStudent ? 'Yes' : 'No' }}</p> <!-- conditional rendering and ternary expression -->
  <hr />
  <p>{{ greeting }}</p> <!-- interpolation for calling a method with getter syntax -->
  <button (click)="increaseAge(1)">Increase Age</button> <!-- event binding to call a method with parameters when clicked -->
  <hr />
  <input [(ngModel)]="name" placeholder="Enter new name" /> <!-- two-way data binding -->
  <p>New Name Greeting: {{ greet(name) }}</p> <!-- calling a method with interpolated argument -->
</div>

Make sure to import FormsModule in your AppModule to use ngModel for two-way data binding.

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule for ngModel

import { AppComponent } from './app.component';
import { PersonComponent } from './person/person.component';

@NgModule({
  declarations: [
    AppComponent,
    PersonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Include FormsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Display the Component

Now we need to add <app-person></app-person> selector in the main application template so that our PersonComponent is displayed on the page.

<!-- src/app/app.component.html -->
<h1>Welcome to My Angular App</h1>

<app-person></app-person> <!-- Add the person component selector here -->

Step 6: Test the Application

Go back to your browser at http://localhost:4200/. After refreshing, you should see your PersonComponent displayed, showing information about a person and allowing interactions through buttons and input.

Summary

Here’s what we learned in these steps:

• Interpolation ({{ }}): We used it to display values of component properties and to compute and display dynamic values.
• Event Binding ((click...)): A click event triggers a component method that modifies its state.
• Two-way Data Binding ([(ngModel)]...): Changes made in the form field are automatically synchronized and reflected in the view and vice versa. It relies on the FormsModule from Angular.
• Ternary Expression: This allowed us to conditionally render content based on a boolean property (isStudent).
• Method Calling: We called component methods directly from the template to generate dynamic content.