Making the Most of Components with Angular 2

AngularJS (it is now simply called Angular) has long been a popular JavaScript framework. It has seen phenomenal growth as far as usage, community support and popularity from the time it was introduced. Angular 2 is entirely based on components. This article presents a discussion on how best to work with components in Angular 2

What Are Components? Why Are They Needed?

Components in Angular are actually a subset of directives. However unlike the directives, components in Angular always have a template. With Angular 2, you would just use components and directives — controllers and $scope are no longer used. Also note that a component in Angular must belong to the NgModule, so as to enable it to be used by other components.

Components in Angular 2 combine directives, controllers and scope of the earlier iterations and are used in Angular 2 to specify elements and logic in your web page. In essence, components are used to write business logic and create elements. Typically, a component is comprised of the following:

• Template
• Class
• Metadata

While a template is used to render the view for your application, metadata contains any added information for your Angular class. An Angular class is just like your C# or Java class and contains properties and methods. You can write your Angular class using TypeScript.

Creating a Simple Component

Well, what are components anyway? A component is a controller class that is associated with a template. Here’s what a component in Angular 2 looks like:

@Component({
  selector: 'test-component',
  template: `<div>Hi! This is just a test</div>`
})
class TestComponent {
//Usual code
}

Creating Another Component

Note that all components in Angular are actually classes. Inside a class you can have properties as shown below.

class DemoComponent {
  message: string = 'Hello world!';
} 

You can also write the class above as shown in the code snippet below.

class DemoComponent {
  constructor() {
    this.message = 'Hello world!';
  }
}

When creating a class, you should provide a name for your class, specify the property names and their types and also provide a value. When working with Angular 2, you can write your components using TypeScript. TypeScript is a statically typed language like C# and is essentially a superset of JavaScript. Here’s how you can define a component in Angular 2 using TypeScript.

export class MyFirstComponent {
   appTitle: string = 'Welcome to Angular!';
}

Note the usage of the export keyword. This is used to specify that this component can be used in other modules. Also, you should inform Angular that our class is a component. To do this, you would need to import the component decorator and use it on the class as shown below.

import { Component } from '@angular/core';
export class MyFirstComponent  {
  message: string = 'Welcome to Angular!';
}

Once you have done this, you can add the component above the class — this is what we call as decorating the class.

import { Component } from '@angular/core';
@Component()
export class MyFirstComponent {
    message: string = 'Welcome to Angular!';
}

Note that @Component is a TypeScript decorator, a function actually that modifies the class that is defined beneath it. The next thing you can do is use decorator and add metadata.

@Component({
  selector: 'hello-world'
})
@View({
  template: '<div>Hello {{name}}</div>' }) 
class MyDemoComponent({ 
  name: 'Joydip Kanjilal' 
}) 
bootstrap(MyDemoComponent); 

Summary

This article presented a discussion on components in Angular 2 and how we can work with them with relevant code snippets to illustrate the concepts covered. I will discuss more on components in Angular 2 in my future articles here. Till then, you may want to take a look at this article for further study on this topic.