Template Syntax in Angular

Angular's template syntax allows you to create dynamic and interactive views for your components. This tutorial covers the key elements of Angular's template syntax, including interpolation, property binding, event binding, and two-way data binding.

Interpolation

Interpolation allows you to embed component properties and expressions in the template using double curly braces {{ }}.

<p>{{ title }}</p>

export class AppComponent {
  title = 'Hello, Angular!';
}

Property Binding

Property binding allows you to bind component properties to HTML element properties using square brackets [].

<img [src]="imageUrl" alt="Image description">

export class AppComponent {
  imageUrl = 'https://example.com/image.jpg';
}

Event Binding

Event binding allows you to bind component methods to HTML element events using parentheses ().

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

export class AppComponent {
  handleClick() {
    console.log('Button clicked!');
  }
}

Two-Way Data Binding

Two-way data binding allows you to synchronize the data between the component and the template using the ngModel directive and the banana-in-a-box syntax [()].

<input [(ngModel)]="name">
<p>Hello, {{ name }}!</p>

export class AppComponent {
  name = 'Angular';
}

Attribute Binding

Attribute binding allows you to bind component properties to HTML element attributes using attr.

<button [attr.aria-label]="ariaLabel">Button</button>

export class AppComponent {
  ariaLabel = 'Accessible Button';
}

Class Binding

Class binding allows you to add or remove CSS classes based on component properties using class.

<div [class.highlight]="isHighlighted">Highlight me!</div>

export class AppComponent {
  isHighlighted = true;
}

Style Binding

Style binding allows you to set inline styles based on component properties using style.

<div [style.color]="textColor">Color me!</div>

export class AppComponent {
  textColor = 'blue';
}

Template Reference Variables

Template reference variables provide a way to access DOM elements or Angular components within a template using the # symbol.

<input #myInput type="text">
<button (click)="logValue(myInput.value)">Log Value</button>

export class AppComponent {
  logValue(value: string) {
    console.log(value);
  }
}

Structural Directives

Structural directives change the DOM layout by adding or removing elements. The most common structural directives are *ngIf and *ngFor.

*ngIf

<div *ngIf="isVisible">This is conditionally visible</div>

export class AppComponent {
  isVisible = true;
}

*ngFor

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

export class AppComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
}

Attribute Directives

Attribute directives change the appearance or behavior of an element. Common attribute directives include ngClass and ngStyle.

ngClass

<div [ngClass]="{'highlight': isHighlighted}">Highlight me!</div>

export class AppComponent {
  isHighlighted = true;
}

ngStyle

<div [ngStyle]="{'color': textColor}">Color me!</div>

export class AppComponent {
  textColor = 'blue';
}

Conclusion

Understanding Angular's template syntax is essential for creating dynamic and interactive user interfaces. By leveraging interpolation, property binding, event binding, two-way data binding, and directives, you can build powerful Angular applications with ease. Happy coding!