Angular Template Statements 🎯

Welcome to the Angular Template Statements tutorial! In this lesson, we'll dive into one of the key features of Angular - Data Binding. We'll explore how to use Angular's template statements to display and manipulate data in our application.

By the end of this tutorial, you'll be able to:

Understand the concept of Angular Data Binding
Use Angular's template statements to display data
Manipulate data using template statements
Understand the difference between Interpolation, Property Binding, Event Binding, and Two-Way Data Binding

Getting Started 📝

Before we dive into template statements, let's ensure you have Angular set up. Follow the official Angular guide to install Angular CLI on your machine.

After installation, create a new project:

bash

ng new template-statements

Change into the project directory:

bash

cd template-statements

Now, let's explore the different types of Angular Template Statements.

Interpolation 💡

Interpolation is the simplest way to display data in an Angular template. It allows us to embed expressions directly into our HTML using double curly braces ({{ }}).

Example

In your app component, add the following code:

typescript

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to {{ title }}!</h1>
  `
})
export class AppComponent {
  title = 'CodeYourCraft';
}

This code sets the title of our application to 'CodeYourCraft' and displays it in an h1 tag using interpolation.

Run the application:

bash

ng serve

Visit http://localhost:4200 in your browser to see the result.

Property Binding 💡

Property binding is used to bind properties of an HTML element with properties of a component. It allows us to dynamically set properties of HTML elements in our template.

Example

Let's create a component with a custom property and use property binding to set the class attribute of an HTML element:

typescript

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

@Component({
  selector: 'app-highlight',
  template: `
    <h4 [class.highlight]="isHighlighted">{{ text }}</h4>
  `
})
export class HighlightComponent {
  text = 'Hello World';
  isHighlighted = true;
}

Now, use the HighlightComponent in your app component:

html

<app-highlight [text]="title"></app-highlight>

In this example, the title property of the app component is passed to the text property of the HighlightComponent using property binding. The component also sets the class of the h4 element based on the isHighlighted property using property binding.

Event Binding 💡

Event binding allows us to handle events in our components. It lets us respond to user interactions like clicks, hover events, and more.

Example

Let's create a component that displays a button and logs a message when clicked:

typescript

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button (click)="onClick()">Click me!</button>
  `
})
export class ButtonComponent {
  @Output() clickEvent = new EventEmitter();

  onClick() {
    this.clickEvent.emit('Button clicked!');
  }
}

Now, use the ButtonComponent in your app component:

html

<app-button (click)="onButtonClicked($event)"></app-button>

In this example, the ButtonComponent emits a click event when the button is clicked. The onButtonClicked function in the app component catches the event and logs the message.

Two-Way Data Binding 💡

Two-way data binding allows data to flow both ways between the component and the template. In other words, changes in the template update the component's properties, and changes in the component's properties update the template.

Example

Let's create a component that displays an input field and updates the component's property when the input changes:

typescript

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-input',
  template: `
    <input [(ngModel)]="inputValue" type="text" [(ngModelOptions)]="{standalone: true}">
  `
})
export class InputComponent {
  @Input() placeholder: string;
  @Output() inputChange = new EventEmitter();

  inputValue: string;

  ngOnChanges(changes: any) {
    if (changes.placeholder) {
      this.inputValue = changes.placeholder.currentValue;
    }
  }

  onInputChange() {
    this.inputChange.emit(this.inputValue);
  }
}

Now, use the InputComponent in your app component:

html

<app-input placeholder="Enter your name"></app-input>

In this example, the InputComponent uses two-way data binding to update the inputValue property when the input changes. The component also emits an inputChange event when the input changes.

Angular Template Statements 🎯

Angular Template Statements 🎯

Getting Started 📝

Interpolation 💡

Example

Property Binding 💡

Example

Event Binding 💡

Example

Two-Way Data Binding 💡

Example

Quiz 💡