Hello Readers,

In today's blog we will discuss about @Output decorator in Angular2 component.

Introduction: Angular2 is totally based on component and written in Typescript. In Angular1 we are using Controller, $scope but they not longer used in Angular2. Controller and $scope is replaced by Component and Directive in Angular2.

Here is the full Example of ionic2 and Angular2.

First of all we need to install Ionic2. To installation Click Here. After install we will start using of @Output.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <myapp>{{name}}</myapp>  
</ion-content>

home.ts

import {Component,Output} from '@angular/core';
import {NavController} from 'ionic-angular';

	@Component({
	        selector:'myapp',
		templateUrl: 'build/pages/home/home.html'
	})
	export class HomePage {
		@Output() name = "Ionic2"; 
		constructor(private navController: NavController) {
			
		}
	}

In home.ts we are using @output component. To use this we need to import it.

It is very easy to implement. Hope this will help you :)