Building Block of Angular 2

A
s we know Google has made some major changes as compared to Angular 1.x. One of the major change was moving towards a component driven framework. Angular Components is one of the big change that is brought in Angular 2.

A motivation for moving towards Components

The web development community has changed tremendously towards the use of web components in 2009 (Angular 1 was also released in 2009).

With web components now developers can make a really modular code. So, Google realized the power of web components and angular framework was migrated from directives to components based approach in Angular 2.x.

With the component-based approach, we can now create independent components having a complete set of functionality and can inject in our application.

What problems does Angular 2.x resolve?

  1. Earlier in Angular 1.x, we bind our templates and controllers using $scope injector. But now as components are directly associated with templates, so need of $scope is eliminated.
  2. Also, Angular 2 has an extremely well-defined life cycle like OnInit, OnChanges and OnDestroy. (More on it in upcoming posts)

Component in Angular 2.x

So now we have a basic understanding what component is, let's see how we can create a component in Angular 2.x.

In order to create a component, we declare it with special decorator @Component (More on decorators in future tutorials).

The basic requirement to create a component in angular 2.x

  1. Import the component Object
  2. Add meta-data to component using TypeScript Decorator
  3. Export the component
  4. Bootstrap component
  5. Include Component in Module

Please refer the diagram shown below:

Angular Component

Points to remember: 

1. Every angular 2.x app should have at least one module know as app module.

2. Every component that we declare must belong to only one module. (We will see this in action)

Now let's see each step in detail and get into coding. We will create our first functional Component.

Import the component Object

The very first step in creating the component is to import it from an angular core. The way to import is shown below:

import { Component } from '@angular/core'

Angular 2 makes use of ES2015 module syntax. It makes use of import keyword to get code declared in different files.

The import relies on export keyword. Which means that in order to import a Component it also has to be exported somewhere in a file.

Add meta-data to component using TypeScript Decorator

Once we have imported a Component from an angular core, next step is to declare it using @Component decorator. Once the Angular sees @Component decorator it will create a new instance of a component according to the configuration that we specify.

import { Component } from '@angular/core' 

@Component({ 
       selector: 'my-products', 
       templateURL: 'app/products/product-list.component.html' 
})

While creating a component we can specify various configuration for a component. The most used configuration that we can give is shown below. For complete details of configuration please refer Angular Component Metadata.

  1. selector - Defines the name of HTML tag where the component created will live.
  2. provider - Here is where we pass in service that component wants to access. I will be explaining more about service in upcoming articles.
  3. directive - When we want to use other components i.e. If this component has a dependency on another component, that component is declared here.
  4. styles or styleUrls - Styles specific to components are declared here. We can also pass file where our styles are declared using styleUrls. Also, we can pass an array of the style sheets to this option.
  5. template or templateUrl - HTML specific to components are declared here. We can also pass file where our HTML is declared using templateUrl. It allows us to directly bind our component and view. Make a note that we cannot pass array here.

Export the component

As we have seen earlier that for importing a component we need to export the component. Here we are exporting our component so that we can include it in another file.

import { Component } from '@angular/core'

@Component({
    selector: 'my-products',
    templateURL: 'app/products/product-list.component.html'
})

export class ProductListComponent { }

Bootstrap component

Please make a note that this step is only required if you want to bootstrap application using the component that we have created. If this a second component then we can skip this step.

As you know that in Angular 1.x we use ng-app to bootstrap our application. In a similar way, we bootstrap our Angular 2.x application in a way shown below.

import { bootstrap } from '@angular/platform-browser-dynamic'


bootstrap(AppComponent)

Include Component in Module

Now our component is ready and is ready for use. We need to tell our Angular 2.x app that we want to use a component by declaring it in module file `app.module.ts`.  Here in declarations, we declare our component that we want to use.

Please make a note that the component that we have exported in step 3 should match here.

@NgModule({
    declarations: [ 
        AppComponent,
        ProductListComponent
    ],
    imports: [ 
        BrowserModule
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

Once we have component declared we can inject that component in HTML using `<my-products></my-products>` selector that we have defined while creating metadata for the component.

This is how a component works and make development and testing really easy. Hopefully, it is helpful. I will be sharing more about Angular 2.x in upcoming posts.

Author Info

Tavish Aggarwal

Website: http://tavishaggarwal.com

Tavish Aggarwal is a front-end Developer working in a Hyderabad. He is very passionate about technology and loves to work in a team.

Category