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.