Components Advanced

What is a Component?

@Component is an annotation that tells Angular that the class, which the annotation is attached to, is a component.

Lets get back to our messages component and lets make it pretty!!

• Add json data.

• Add a service to consume this data.

• Export the service.

• Import dependencies in the component.

• AfterviewInit: Lifecycle hook that is called after a component's view has been fully initialized.

• Fetch data & add template to html & style the sass & we should see this:

• Message Details :
  • Create new message component for a message detail.
  • Changes in route, module & messages html to load a message
  • Change static html to json data

After all the changes, we should see this:

Route Parameters

• So our messages component relies on parameters to get to details component. We can get the parameters and the data by injecting ActivatedRoute. ActivatedRoute is an object that contains information about route parameters, query parameters and URL fragments. We can inject the ActivatedRoute into our component.

import { ActivatedRoute, Router } from '@angular/router';

...

constructor(private _route: ActivatedRoute) {
}

ActivatedRoute comes with a params property which is an Observable and we can subscribe to the parameters Observable changes to access the params.id which is the message id in our case.

this._route.params.subscribe((params: {id: number}) => {
let id: number = params.id;

A Component is really a directive with a template. It's the most common of the three directives and we write lots of them as we build any angular application. Let's talk a little bit more about Directives.

What is a Directive

A directive is a controller class annotated with a @Directive. It requires a CSS selector to identify the HTML in the template that is associated with the directive.

e.g. If we have a directive

@Directive\({

 selector: '[tdFade]',

})

export class TdFadeDirective {
  ...
}

then the template is gonna be:

<div [tdFade]="fadeDiv">

to fade it in and out this element.

There are three kinds of directives in Angular:

1. Components - directives with a template.

2. Structural directives - change the DOM layout by adding or removing DOM elements.

3. Attribute directives - change the appearance or behavior of an element.

While talking about Directives, there are two key things to talk about:

@HostListener & @HostBinding

What is @HostListener?

As the name suggests, HostListener is used for listening to the host. It lets you subscribe to events of the DOM element and when we say host, we mean the DOM element the directive is attached to. It's quite a handy way of adding behavior to an element say adding blur or focus on an element.

One key thing to remember here is that the hosts are different in case of component vs directive:

In case of directive, the host is the tag which has the directive defined e.g.

<p someDirective>

vs.

Components which would be the component selector tag.

<my-component-selector someDirective>

What is @HostBinding?

The @HostBinding decorator binds host element properties to component data properties. It allows us to programmatically set that property.

e.g.

@HostBinding('style.display')   display = 'block';
@HostBinding('style.position')  position = 'absolute';

These were some ways to handle template behaviors. Sometimes we also need a way to access a component from another component. @ViewChild decorator provides access to the class of child component from the containing component. e.g.

export class MainComponent {

`@ViewChild(ChildComponent) childRef: ChildComponent;

mainMethod() {

  this.childRef.somemethod();

}

We use it quite a lot in Covalent and other products.