Monday, November 4, 2024

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.

Joydip Kanjilal
Joydip Kanjilal
A Microsoft Most Valuable Professional in ASP.NET, Speaker, and Author of several books and articles. More than 25 years of experience in IT with more than 18 years in Microsoft .NET and its related technologies. He was selected as a Community Credit Winner at http://www.community-credit.com several times. He has authored 8 books and more than 500 articles in some of the most reputed sites worldwide including MSDN, Info World, CodeMag, Tech Beacon, Tech Target, Developer, CodeGuru, and more.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured