Angular Templates

What is a template in Angular?

A template in Angular is a section of HTML that defines the view of a component. It is bound to the component's class using data binding, event binding, and Angular's structural and attribute directives. The template contains the HTML markup and Angular-specific syntax to display dynamic data and handle user interactions.

What is the difference between an inline template and an external template in Angular?

Angular supports two ways to define templates for a component:

• Inline template: The template is directly written inside the component's @Component decorator using the template property. Inline templates are suitable for small components with simple HTML.
• External template: The template is written in a separate HTML file, and the component uses the templateUrl property to reference the file. This is preferred for larger components with more complex HTML.

Example of an inline template:

@Component({
  selector: 'app-inline',
  template: '<p>This is an inline template!</p>'
})
export class InlineComponent {}

Example of an external template:

@Component({
  selector: 'app-external',
  templateUrl: './external.component.html'
})
export class ExternalComponent {}

The external template is stored in external.component.html and provides a more organized way to manage larger HTML structures.

What is interpolation in Angular templates?

Interpolation is a way to display dynamic data in Angular templates by embedding TypeScript expressions within double curly braces {{ }}. The expression inside the braces is evaluated, and the result is displayed in the view.

Example of interpolation:

export class ExampleComponent {
  name = 'Angular';
}

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

In this example, the value of the name property is interpolated into the template and displayed as "Hello, Angular!"

What is property binding in Angular templates?

Property binding in Angular allows you to set the value of an HTML property or attribute dynamically using square brackets [ ]. The property in the component is bound to an HTML element's property, ensuring that the view is updated whenever the property value changes.

Example of property binding:

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

<img [src]="imageUrl" />

In this example, the src property of the img element is dynamically bound to the imageUrl property in the component class.

What is event binding in Angular templates?

Event binding in Angular is used to listen for and respond to DOM events such as clicks, key presses, or form submissions. It is done using parentheses ( ), where the event name is bound to a method in the component class.

Example of event binding:

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

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

In this example, the click event is bound to the handleClick method, and when the button is clicked, the method is executed.

What is two-way data binding in Angular templates?

Two-way data binding in Angular allows for synchronization of data between the component class and the view. It is achieved using the [(ngModel)] directive, which combines both property and event binding. This ensures that changes to the input in the view are reflected in the component and vice versa.

Example of two-way data binding:

export class ExampleComponent {
  name = '';
}

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

In this example, the name property is bound to both the input field and the paragraph, ensuring that updates to the input field are reflected in the paragraph.

What are structural directives in Angular templates?

Structural directives are special directives in Angular that change the structure of the DOM by adding or removing elements. Common structural directives include:

• *ngIf: Conditionally includes or excludes an element based on a boolean expression.
• *ngFor: Repeats an element for each item in an array.
• *ngSwitch: Displays one of many possible elements based on an expression.

Example of *ngIf:

<p *ngIf="isVisible">This is visible</p>

In this example, the paragraph is only displayed if the isVisible expression evaluates to true.

What is the purpose of *ngFor in Angular templates?

*ngFor is a structural directive in Angular that allows you to iterate over a list or array and display each item in the DOM. It works by repeating a template for each item in the collection.

Example of *ngFor:

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

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

In this example, *ngFor loops through the items array and creates a list item for each element.

What is *ngSwitch in Angular templates?

*ngSwitch is a structural directive that allows you to display one of many elements based on a matching expression. It works in combination with *ngSwitchCase and *ngSwitchDefault to define different templates for different cases.

Example of *ngSwitch:

export class ExampleComponent {
  viewMode = 'list';
}

<div [ngSwitch]="viewMode">
  <p *ngSwitchCase="'list'">List View</p>
  <p *ngSwitchCase="'grid'">Grid View</p>
  <p *ngSwitchDefault>Default View</p>
</div>

In this example, the appropriate template is displayed based on the value of viewMode.

What are attribute directives in Angular templates?

Attribute directives in Angular are used to modify the behavior or appearance of an element, component, or another directive. Unlike structural directives, attribute directives do not add or remove elements from the DOM but change their appearance or behavior by setting properties or applying classes.

Example of an attribute directive:

<div [class.active]="isActive">This div is active</div>

In this example, the [class.active] directive adds or removes the active class based on the value of the isActive property.

How do pipes work in Angular templates?

Pipes in Angular are used to transform data before displaying it in the view. Pipes take in data as input and return a transformed version of it. Angular provides several built-in pipes, such as date, uppercase, and currency, and you can also create custom pipes.

Example of using pipes:

<p>{{ currentDate | date:'longDate' }}</p>
<p>{{ name | uppercase }}</p>

In this example, the date pipe formats a date, and the uppercase pipe converts a string to uppercase.

What are custom pipes, and how do you create them in Angular?

Custom pipes in Angular are user-defined pipes that transform data in a specific way. They are created by implementing the PipeTransform interface and defining the transform method.

Example of a custom pipe:

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

In the template, the custom pipe can be used like any other pipe:

<p>{{ 'Angular' | reverse }}</p>

This custom pipe reverses the string "Angular" and displays "ralugnA".