Angular 2 Components

Hey Guys,

In the previous post we have learn the basic concepts of Angular JS 2.0.

In this post we’ll take a detailed look at Angular 2 components. As you may know, components are the basic building blocks that we use to build and specify our application logic in any page in Angular 2. These components are therefore a core part of the Angular 2 framework. In a way you could compare them to a combination of Directives & Controllers in AngularJS 1.x but they are in essence, wildly different.

What Makes A Bare Minimum Component

With that being said, let’s look at how you can build an Angular2 component. In the code below, I’ve created a simple component that renders your message on a view that is defined as a property of the component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  template:`<div>Hello my name is  . <button (click)="displayName()">Say My Name</button></div>`
})
export class AppComponent {
  name: string;
  
  constructor() {
    this.name = 'Adnan';
  }
  
  displayName() {
    alert('My name is', this.name)
  }
  
}

• We have imported the Component used here from the Angular library. This is used to decorate and add metadata to our component class so that when Angular 2 bootstraps our application, it knows what type it is.
• The selector used in the code snippet above is what tells Angular 2, what to watch out for in the DOM and replace it with the template of our component.
• The template used in the snippet above holds our html, which is eventually rendered to the view. We can also use the templateUrl for this purpose and move our html out of the ts typescript file. This is something you’ll want to do when your template grows big enough and you want to maintain a separation of concerns.
• As you may have noticed the name (used in the snippet above) is a property of our component class and is available in the template through interpolation.

So in your html, using the above component is simply a matter of typing:

<app-component></app-component>

Component Lifecycle

When the Angular 2 framework instantiates a component it calls the constructor of the component class and may inject some other required object(s) into that (if specified). Before and after that constructor is called though, it goes through a series of steps that we can track by hooking into the lifecycle of a component. You can find a full list of the Lifecycle Hooks you can use at Angular Docs.

The following diagram sums up the component lifecycle:

Now, let’s make use of the ngInit() hook and move our name property initialization there (as shown below), since we want to keep the constructor clear of any initializations and new-ings.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component',
  template:`<div>Hello my name is  . <button (click)="displayName()">Say My Name</button></div>`
})
export class AppComponent implements OnInit {
  name: string;
  
  constructor() {
  }
  
   ngOnInit() { 
    this.name = 'Adnan'; 
  }
  
  displayName() {
    alert('My name is', this.name)
  }
  
}

Passing Data to a Component via @Input and @Output Properties

The component we created above is a very simple one. Let’s suppose that we want the name property to be provided externally (by some other component) so we can utilize it with multiple names and as a reusable component. This is where we can use the @Input property (as shown below).

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-component',
  template:`<div>Hello my name is  . <button (click)="displayName()">Say My Name</button></div>`
})
export class AppComponent implements OnInit {
  @Input() name: string;
   
  constructor() {
  }
  
   ngOnInit() { 
    
  }
  
  displayName() {
    alert('My name is', this.name)
  }
}

Now, to pass data to your template you simple pass it as:

<app-component [name]="'Obaid'"></app-component>

The output property as you might have guessed is the exact opposite of the code above, and allows a component to emit an event that may have a value. You can learn more about it in the Angular2 docs

Injecting services into components

Next, let’s take a look at injecting services into components.  Dependency injection basically comes into play when your component is dependent on some other component. Angular2’s dependency injection is vastly different from the one in Angular2 (you can learn more about it in the Angular2 docs). Suppose you want to set the title of the browser bar, here is how you would inject the Title service:

import { Component, OnInit, Input } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-component',
  template:`<div>Hello my name is  . <button (click)="displayName()">Say My Name</button></div>`
})
export class AppComponent implements OnInit {
  @Input() name: string;
   
  constructor(private titleService: Title) {
  }
  
  ngOnInit() { 
    this.titleService.setTitle(name);
  }
  
  displayName() {
    alert('My name is', this.name)
  }
}

The key point to note here is that the constructor takes the Title service as a parameter which the Angular2 runtime provides while new-ing the component object.

I’ve taken the above example from the Angular2 cookbook by the way.

Conclusion

As you can see, a lot has changed in Angular2 and to be honest, in this tutorial we have barely scratched the surface. It might seem intimidating at first but once you get used to the notion of using components, there is no going back, since they can really help you in keeping you code clean and well-defined.

In the next tutorial we will learn about the Data Binding in Angular JS 2.0

Blog Post