Handle Multiple Elements with Directives

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:

@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.