Angular Built-In Directives

What are built-in directives in Angular?

Built-in directives in Angular are predefined directives that come with Angular to help developers manipulate the DOM. These directives can be categorized into structural directives (which modify the structure of the DOM) and attribute directives (which modify the appearance or behavior of existing elements). Common built-in directives include *ngIf, *ngFor, ngClass, and ngStyle.

What is *ngIf in Angular, and how does it work?

*ngIf is a structural directive in Angular that conditionally includes or removes an element from the DOM based on the evaluation of an expression. If the expression evaluates to true, the element is added to the DOM; if it evaluates to false, the element is removed.

Example of *ngIf:

export class ExampleComponent {
  isVisible = true;
}

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

In this example, the div element is rendered only if isVisible is true.

What is *ngFor in Angular, and how does it work?

*ngFor is a structural directive in Angular that repeats a given HTML template for each item in a collection (like an array). It allows developers to easily render lists of items in the DOM.

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, the *ngFor directive loops through the items array and generates an li element for each item.

What is *ngSwitch in Angular, and how is it used?

*ngSwitch is a structural directive in Angular that allows you to conditionally display different elements based on a single expression. It works alongside *ngSwitchCase and *ngSwitchDefault to determine which template should be displayed.

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, *ngSwitch displays one of the views (list, grid, or default) based on the value of viewMode.

What is ngClass in Angular, and how does it work?

ngClass is an attribute directive in Angular that dynamically adds or removes CSS classes on an element based on an expression. You can pass a string, an object, or an array to control the classes applied to the element.

Example of ngClass:

export class ExampleComponent {
  isActive = true;
}

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">
  This element is dynamically styled.
</div>

In this example, the active class is added to the element if isActive is true; otherwise, the inactive class is applied.

What is ngStyle in Angular, and how is it used?

ngStyle is an attribute directive in Angular that allows you to dynamically set inline styles on an element. You can pass an object containing style properties and values to control the element's appearance.

Example of ngStyle:

export class ExampleComponent {
  isHighlighted = true;
}

<div [ngStyle]="{ 'background-color': isHighlighted ? 'yellow' : 'white' }">
  This element's background color changes dynamically.
</div>

In this example, the background color of the div changes to yellow if isHighlighted is true, otherwise, it remains white.

What is ngModel in Angular, and how does it enable two-way data binding?

ngModel is an Angular directive that allows two-way data binding between an HTML element (usually a form input) and a component property. It synchronizes the data in the view and the component, so changes in the component are reflected in the view, and changes in the view are reflected in the component.

Example of two-way data binding with ngModel:

export class ExampleComponent {
  name = '';
}

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

In this example, the name property in the component is bound to the input field and the paragraph. Any changes made in the input field will automatically update the name property and reflect in the paragraph.

How does ngTemplate work in Angular?

<ng-template> in Angular is a directive used to define a template that can be conditionally rendered or reused. Unlike regular HTML elements, the content inside <ng-template> is not rendered until it is explicitly referenced or embedded using structural directives like *ngIf, *ngFor, or ngTemplateOutlet.

Example of using ng-template with *ngIf:

<ng-template #loadingTemplate>
  <p>Loading...</p>
</ng-template>

<div *ngIf="isLoaded; else loadingTemplate">
  Data has been loaded.
</div>

In this example, the loadingTemplate is displayed if isLoaded is false; otherwise, the "Data has been loaded" message is displayed.

What is ng-container and when should it be used?

<ng-container> is a grouping element that does not render to the DOM but is useful for applying structural directives without adding extra elements to the DOM. It is especially helpful when you need to conditionally render multiple elements without wrapping them in an extra parent element.

Example of ng-container:

<ng-container *ngIf="showDetails">
  <h1>Title</h1>
  <p>This is a detailed description.</p>
</ng-container>

In this example, both the <h1> and <p> elements are conditionally rendered based on the showDetails expression without adding an extra parent element.

What is ng-content in Angular, and how is it used for content projection?

<ng-content> is a directive used for content projection in Angular, allowing you to pass content from a parent component to a child component and project it into a specific location within the child component's template. This enables you to create reusable components that can display dynamic content from the parent component.

Example of using ng-content:

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}

In the parent component:

<app-card>
  <h1>Card Title</h1>
  <p>This is some content inside the card.</p>
</app-card>

In this example, the content inside <app-card> is projected into the <ng-content> placeholder in the child component.

What is ngTemplateOutlet in Angular?

ngTemplateOutlet is a directive that allows you to dynamically insert an <ng-template> into the DOM. You can use it to display templates conditionally or reuse templates in different parts of the application.

Example of ngTemplateOutlet:

<ng-template #templateRef>
  <p>This is a reusable template!</p>
</ng-template>

<div [ngTemplateOutlet]="templateRef"></div>

In this example, the content of the #templateRef template is dynamically inserted into the <div> using ngTemplateOutlet.