Directives and pipes

Directives

Component Directives

Component directives are the most common type of directive. They are used to create reusable UI components that can be used throughout an application. Components are essentially a group of HTML elements, styles, and behavior that can be used to build a specific part of a UI.

Attribute Directives

Attribute directives are used to change the behavior or appearance of an element. They can be used to add or remove CSS classes, change the style of an element, or add behavior to an element. Attribute directives are used by adding an attribute to an element, followed by the directive name.

Structural Directives

Structural directives are used to add or remove elements from the DOM based on a condition. They can be used to create loops or conditionals in the template. Structural directives are used by adding an asterisk (*) to the directive name.

Pipes

Pipes are a way to transform data in an Angular template. They take data as input and transform it into a desired output. There are many built-in pipes in Angular, and developers can also create their own custom pipes.

Built-in Pipes

Angular provides a set of built-in pipes that can be used to transform data in the template. Some examples of built-in pipes include the *uppercase* pipe, which transforms text to all uppercase, and the *date* pipe, which formats dates.

Custom Pipes

Developers can also create their own custom pipes to transform data in a specific way. Custom pipes can be created using the *@Pipe* decorator, which tells Angular that the class is a pipe. Custom pipes can be used in the template just like built-in pipes.

Example

Here's an example of using a directive and a pipe in an Angular template. In this example, we have a list of items that we want to display in a dropdown. We also want to show the current date and time in the template.

    <div>
        <select appCustomDirective>
          <option *ngFor="let item of items">{{ item }}</option>
        </select>
        <p>The current date and time is {{ currentDate | date }}</p>
      </div>

In this example, we're using the *ngFor* directive to loop through the *items* array and display each item as an option in a select element. We're also using the *date* pipe to format the *currentDate* property as a date.