Gain insights into Angular’s built-in directives and pipes, and delve into creating custom ones. Learn about their real-world applications to boost your project's performance and code readability.

angular.tar.gz

angular

angular-fa

Directives and pipes are incredible and often undervalued features of the Angular framework. They allow us to write efficient code, improve application performance, and omit code duplications.

In this course, you will learn about the theory and the working mechanisms of built-in directives and pipes in Angular. You’ll also implement some custom directives and pipes to learn about their real-world application cases. With this course, you will improve your Angular skills and refine your project’s codebase to increase the performance and readability of your code.

Directives and Pipes in Angular

Sometimes, we need to invoke methods on their elements from the parent component’s context or just read data from child components. When we’re only working with a single component or element, it’s fairly easy. Usually, we implement this as follows:

```tsx
@Component({
  selector: 'app-form',
  template: `
		<form>
	    <app-input #nameInput></app-input>
		</form>
  `
})
export class FormComponent {
	@ViewChild('nameInput') nameInput: InputComponent;

	// Here, we have an access to the InputComponent via this.nameInput
}
```

However, if we have multiple elements, we need to slightly change our approach to get access to all of them. 

# The `ViewChildren` decorator
Let's consider that we have a simple component with a couple of `div` elements, and we want to access them from the component’s class. We can use something very similar to @ViewChild shown above called the `@ViewChildren` decorator. The `@ViewChildren` decorator gathers all elements that matches the selector, creating a list of elements.

This is another Angular core decorator that provides very similar outcomes. However, we should note that we might potentially select multiple elements so that the variable can no longer persist a single element.


In order to do this, Angular provides a new class, `QueryList`, which is basically a way to store multiple elements in the form of a list. Let's check out the code below:

```tsx
@Component({
  selector: 'app-form',
  template: `
		<form>
	    <app-input #nameInput></app-input>
	    <app-input #nameInput></app-input>
	    <app-input #nameInput></app-input>
		</form>
  `
})
export class FormComponent implements OnInit {
	@ViewChildren('nameInput') nameInputs: QueryList<InputComponent>;

	ngOnInit(){
		this.nameInputs.forEach(e => console.log('input'));
	}
}
```

In the example above, we select all three inputs, store them under the `nameInputs` variable in `QueryList` Then, we iterate over it, logging an `input` for each one.

# The `QueryList` and decorator

Let’s simplify our example by using standard input elements instead of the custom components:

These are four simple checkboxes above that we store as `QueryList` in the component. Now, let’s imagine we want to have a button that allows us to check how many items are selected when clicked. We can count the ones that were selected like this:

```tsx
@Component({
  selector: 'app-form',
  template: `
		<form>
	    <input #check type="checkbox"> 
	    <input #check type="checkbox"> 
	    <input #check type="checkbox"> 
	    <input #check type="checkbox"> 
		</form>
  `
})
export class FormComponent {
	@ViewChildren('check') checks: QueryList<ElementRef>;
}
```

These are simply four checkboxes, which we store as the `QueryList` in the component. Now imagine we would like to have a button, and on click, we check how many items are selected. Counting the selected ones could be done as below:

```tsx
let count = 0;
this.checks.forEach(input => {
	// See if the input is checked
	if(input.nativeElement.checked === true){
		// Add 1 to the count
		count = count + 1;
	}
});
console.log(count);
```

Now, let’s bring the rest of the code:

```tsx
@Component({
  selector: 'app-form',
  template: `
		<form>
	    <input #check type="checkbox"> 
	    <input #check type="checkbox"> 
	    <input #check type="checkbox"> 
	    <input #check type="checkbox"> 
		</form>

		<button (click)="calculate()">check</button>
  `
})
export class FormComponent {
	@ViewChildren('check') checks: QueryList<ElementRef>;

	calculate() {
    let count = 0;
    this.checks.forEach(input => {
      // See if the input is checked
      if (input.nativeElement.checked === true) {
        // Add 1 to the count

        count = count + 1;
      }
    });
    console.log(count);
  }

}
```

Here’s a live application to test the whole scenario:


Let’s learn about the `ViewChildren` decorator and how to use it with custom directives.


Handle Multiple Elements with Directives


Let’s learn about the `ViewChildren` decorator and how to use it with custom directives.

Getting Started

Directives

Test: Built-in Directives

Attribute Directives

Test: Attribute Directives

Structural Directives

Test: Structural Directives

Create Your First Data Pipeline with a Dashboard

Advanced Techniques Using Directives

Test: Advanced Directives

Directives Summary

Pipes

Test: Pipes

Pipes summary

Build an E-book Reader in Angular With Gutendex API

Handle Multiple Elements with Directives

The `ViewChildren` decorator

Test: Built-in Directives

Test: Attribute Directives

Test: Structural Directives

Create Your First Data Pipeline with a Dashboard

Test: Advanced Directives

Test: Pipes

Build an E-book Reader in Angular With Gutendex API

Handle Multiple Elements with Directives

The ViewChildren decorator

The `ViewChildren` decorator