Components in Angular2


by Samarth Sinha on 2017-06-26 07:19:15

Components are a logical piece of code for Angular JS application. A Component consists of the following −

  • Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives.

  • Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript.

  • Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.

To create a component make about.component.ts file in your app folder.

import { Component } from '@angular/core';
import { PostsService } from '../services/posts.service';

  selector: 'about',
  templateUrl: 'app/templates/app.component.html',
  providers: [PostsService],

export class AboutComponent {

Now in app.module.ts include the component:

import { AppComponent }  from './app.component';
  declarations: [ AppComponent, AboutComponent ],

Viewer Comments (2)

About the Author

  • avatar
    Samarth Sinha

    My name Samarth Sinha. I work on developing Web Applications using PHP and MySQL and in different frameworks of PHP like Laravel, CakePHP, CodeIgnitor and Smarty. In databases I have worked in MySQL and Postgres. I started this blog to share my knowledge to those who wants to start developing Web Applications using PHP.