dcsimg

Making the Most of Components with Angular 2

By Joydip Kanjilal

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


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.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date