@Attribute —

Returns the value of the specified attribute from the host

@ViewChildren—

Returns the specified elements or directives from the view DOM as QueryList

console.log() output

QueryList is just a fancy name for an object that stores a list of items. What is special about this object is when the state of the application changes Angular will automatically update the object items for you.

QueryList implements an iterable interface, therefore, it can be used in Angular templates with the ngFor directive. ( you can read more about this topic here )

QueryList API —

Getters —

first — get the first item

— get the first item last — get the last item

— get the last item length — get the length

Methods —

map() , filter() , find() , reduce() , forEach() , some().

toArray() — returns the items as javascript array

— returns the items as javascript array changes() — Changes can be observed by subscribing to the changes Observable. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.

Things to Remember —

The QueryList is initialized only before the ngAfterViewInit lifecycle hook, therefore, is available only from this point. ViewChildren don’t include elements that exist within the ng-content tag.

The read parameter —

By default, the ViewChildren decorator will return the component instance, but you can ask for other tokens:

The native DOM element —

console.log() output

ViewContainerRef — You need this token when you need to create templates or components dynamically

console.log() output

@ViewChild—

Like ViewChildren but returns only the first element or the directive matching the selector from the view DOM

You can see that you also can use a local variable from your template to get a reference to the element in your parent component.

console.log() output

@ContentChildren —

Returns the specified elements or directives from the content DOM as QueryList

Things to Remember —

The QueryList is initialized only before the ngAfterContentInit lifecycle hook, therefore, is available only from this point. ContentChildren includes only elements that exists within the ng-content tag. Returns QueryList like ViewChildren .

@ContentChild —

Like ContentChildren but returns only the first element or the directive matching the selector from the content DOM

@HostBinding —

Declares a host property binding

In the third example Angular will add type=”text” to our host because when you don’t provide a parameter the class property name is used.

@HostListener —

Declares a host listener. Angular will invoke the decorated method when the host element emits the specified event

This decorator also support adding events to the globals window , document , and body with this syntax — global:event .

@Self —

The @Self decorator tells DI to look for a dependency only from itself, so it will not walk up the tree

console.log() output

If the injector does not find the dependency, it will throw.

@SkipSelf —

The @SkipSelf decorator tells DI to look for a dependency in the whole tree starting from the parent injector

console.log() output

If the injector does not find the dependency, it will throw.

@Host —

The @Host decorator tells DI to look for a dependency in any injector until it reaches the host

console.log() output

For a more complicated use case you can read my article — Angular — Clean Up your Form Template.

@Optional —

A parameter metadata that marks a dependency as optional. The injector provides null if the dependency is not found.

In our example, the dependency property will be null because we don’t register the OptionalDependency provider in any injector.

@Inject —

A parameter decorator that specifies a dependency

@Injectable —

Let’s Angular know that a class can be used with the DI

Remember that this decorator is not required if the class does not have any dependencies or you don’t need the class to be injectable.

I skipped on the most common decorators: Input , Output , Component , Directive , Pipe .

😱 🚀 Have You Tried Akita Yet?

One of the leading state management libraries, Akita has been used in countless production environments. It’s constantly developing and improving.

Whether it’s entities arriving from the server or UI state data, Akita has custom-built stores, powerful tools, and tailor-made plugins, which help you manage the data and negate the need for massive amounts of boilerplate code. We/I highly recommend you try it out.

Follow me on Medium or Twitter to read more about Angular!