Angular @ViewChildren Decorator With Examples

@ViewChildren decorator in Angular is used to get reference list of elements or directives from the view DOM in a Component class. Using @ViewChildren decorator you can configure a view query, that is done by passing a selector with @ViewChildren. For example

@ViewChildren('uname') userName: QueryList<UserComponent>

Here 'uname' is the passed selector. ViewChildren looks for all the elements or the directives matching the selector in the view DOM and return them as an instance of QueryList which is another class in Angular used to store unmodifiable list of items.

If a child element is added, removed, or moved, the query list will be updated, and the changes function of the QueryList will emit a new value.

Once you have access to DOM elements in the parent Component you can do DOM manipulation.

Table of contents

1. View queries and ngAfterViewInit callback
2. @ViewChildren Metadata Properties
3. Which selectors are supported
4. Using ViewChildren with directive
5. Using ViewChildren with Component
6. Using ViewChildren with ‘read’ property
7. Using ViewChildren with template reference variable
8. ViewChildren with multiple selectors
9. @ViewChildren Vs @ViewChild

View queries and ngAfterViewInit callback

View queries are set before the ngAfterViewInit callback is called. That means ngAfterViewInit callback is the best place to manipulate the element or directive by using the reference variable.

@ViewChildren Metadata Properties

You can pass the following three metadata properties with @ViewChildren decorator.

• selector- The directive type or the name used for querying.
• read- Used to read a different token from the queried elements. It is an optional property.
• emitDistinctChangesOnly- When used the changes method of the QueryList will emit new values only if the QueryList result has changed. Note that this config option is deprecated, right now it is true by default and will be permanently set to true .

Syntax of ViewChildren-

@ViewChildren(selector, { read?: any;})

Angular @ViewChild Decorator With Examples

@ViewChild decorator in Angular is used if you want to access any directive, child component or DOM element in the Component class.

Using @ViewChild decorator you can configure a view query, that is done by passing a selector with @ViewChild. For example

@ViewChild('membershipForm') memberForm

Here ‘membershipForm’ is the passed selector.

The change detector looks for the first element or the directive matching the selector in the view DOM and assigns it to the property decorated with @ViewChild.

View queries and ngAfterViewInit callback

View queries are set before the ngAfterViewInit callback is called. That means ngAfterViewInit callback is the best place to manipulate the element or directive by using the reference variable.

ViewChild Metadata Properties

You can pass the following three metadata properties with @ViewChild decorator.

• selector- The directive type or the name that has to be queried.
• read- Used to read a different token from the queried elements.
• static- True to resolve query results before change detection runs, false to resolve after change detection. Defaults to false.

read and static properties are optional.

Angular @HostBinding Decorator With Examples

@HostBinding decorator in Angular is used to mark a DOM property of the host element as a binding property. Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive. This decorator is quite useful when creating a custom directive as you can bind a property of the host element to a field in your custom directive. By changing the field in the custom directive you can manipulate the host element of the directive.

There is one option that you can pass with the @ HostBinding decorator-

• hostPropertyName- The DOM property that is bound to a data property.

Angular @HostListener Decorator With Examples

@HostListener decorator in Angular is used to declare a DOM event (like click, mouseenter) to listen for and define a handler method to execute when that event occurs. This decorator is quite useful to listen to events emitted by hostelement when creating a custom directive.

There are two options that you can pass with the @HostListener decorator-

• eventName- The DOM event to listen for. It is of type string.
• args- A set of arguments to pass to the handler method when the event occurs. It is of type string[].

For example

@HostListener('click', ['$event.target'])

Here 'click' is the event name.

['$event.target'] is the args parameter which will be passed to the handler method.

Angular @Output() Decorator With Examples

Angular @Output() decorator in a child component or directive allows data to flow from the child to the parent. A property decorated with @Output in child component is used to raise an event to notify the parent of the change. That property must be of type EventEmitter, which is a class in @angular/core that you use to emit custom events.

@Output, $event and EventEmitter in Angular

In order to know how to use @Output decorator in Angular you should have idea about the following entities-

• @Output decorator
• EventEmitter class
• $event object

1. @Output decorator

A property in a Component that emits a custom event is decorated with @Output decorator. For example in the statement

 @Output() messageEvent = new EventEmitter<string>();

messageEvent property is decorated with @Output() which means this property is going to emit a custom event. That is why this property is of type EventEmitter.

Angular @Component Decorator With Examples

Decorators or annotations are used to provide metadata about the entity where these decorators are added. Angular @Component decorator provides metadata about the class and tells Angular that the decorated class is a Component class.

Angular @Component provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

For example-

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 ...
 ...

As you can see selector property here specifies value as ‘app-root’ which means any <app-root></app-root> tags that are used within a template will be compiled using the AppComponent class and get the functionality as defined in the class.

templateUrl is specified as ./app.component.html which means view template is loaded from the file app.component.html in the current directory.

Using styleUrls you can specify One or more relative paths or absolute URLs for files containing CSS stylesheets to use in this component. Here ./app.component.css is specified as css file which means styling for the component is done using hello-world.component.css in the current directory. By specifying style fields like this you can associate a specific css file to a component.