Understanding Ionic 2 : @Component decorator

Thanks to ES6+ and TypeScript ,Ionic 2 has access to object oriented and modern features such as classes and decorators etc..as their name tells decorators are used to decorate classes .Decorating a class specify its role and provides it with specific functionality .The @Component decorator lives in @angular/core package and used to make a class as a component.A component is a software pattern which gets adopted by many modern and popular frameworks like React and Angular 2 .In these frameworks we build our app by building components that use and communicate with each other.Each is self dependent and standalone.This way of building apps has many advanatages and encourages separation of concerns and easy team collaboration.

In this article we are going to discuss the @Component decorator and learn how to use it .

The basic @Component syntax

To use the @component decorator we need first to import it using the simple and modern import system supported by ES6+ and TypeScript

    import {Component} from '@angular/core';
    class MyApp {


@Component decorator options

The @Component decorator has many options that you can specify for you decorated class to use.The most used parameters are:


Which used to directly specify the html code that should be used as the template


Used to specify the relative path of the html file to use as a template by the component which should live in www/build/ folder



    <ion-content padding class="main">
    <h1> This is the main page </h1>
    import {Component} from '@angular/core';
    import {NavController} from 'ionic-angular';

      templateUrl: 'build/pages/main/main.html'
    export class MainPage {
      constructor(private navController: NavController) {
    import {Component} from '@angular/core';
    import {Platform, ionicBootstrap} from 'ionic-angular';
    import {MainPage} from './pages/main/main';

      template: '<ion-nav [root]="mainPage"></ion-nav>'
    export class MyApp {

      private mainPage:any;

      constructor(private platform:Platform) {
        this.mainPage = MainPage;



As we have seen in this article.The @Component decorator is the most important decorator used by Ionic 2.This decorator is a part of Angular 2 core and is used to create Angular 2 components which are the basic buildings of any Angular 2 application.

comments powered by Disqus