Anil Singh | Code-sample.com

@Input allows you to pass data into your controller and templates through html and defining custom properties. @Input   is used to define an input for a component, we use the @Input decorator. Angular 2 components  is the core components of applications but you must need to know “ how to pass data into components to dynamically ?” and that time you need to define an input component. Stayed Informed - Angular 2 @Output You can see the below example for passing the user data in to the components. Example 1, import { Component, Input } from '@angular/core' ; @ Component({ selector : “ user - info ” , template : “ < div > Hello, This is {{ userInfo.name}} < /div>” }) export class UserInfo { @ Input() userInfo; constructor () { } } < user - info [userInfo] = "currentUser" >< /user-info> The components <user-info></user-info> is use to render the user information on the view. Example...

@Output decorator is used to binds a property of a component to send the data from child component to parent component and this is a one-way communication. @Output decorates output properties and its binds a property of the type of angular EventEmitter. Stayed Informed  -  Angular 2 @Inputs Stayed Informed - Angular 4 vs. Angular 2 If you want to bind an event on an element, you can use the new   Angular2   events   i.e. @ Component(...) class yourComponent { addUser(event) { } } The method addUser() will be called when user clicked on button. < button (click) = "addUser()" > Click < /button> < button (click) = "addUser($event)" >< /button> What happen if you want to create a custom event? Now come to the outputs, if you want to create your custom event in  Angular 2  that time we will use to new  @Output decorator . Examples, import { Component} from 'ang...