Skip to main content

Posts

Showing posts with the label Angular 2 Inputs

Angular 2 KeyPress Event Textbox

Angular 2 KeyPress Event Textbox – Examples 1.       The KeyDown event is triggered when the user presses a Key. 2.       The KeyUp event is triggered when the user releases a Key. 3.       The KeyPress event is triggered when the user presses & releases a Key. Stayed Informed – Angular2 Input Events and Examples The examples for KeyPress event , Syntax:-  <input type= "text" [( value )]=" values " ( keypress )=" onKeyPress ($ event )" /> HTML Component – <div class= "ibox-title" > keypress Event - <input type= "text" [( value )]=" values " ( keypress )=" onKeyPress ($ event )" /> <span><strong class= "txt-color" > Resut- </strong> {{values}} </span> </div> Home Component – import { Component } from '@angular/core' ; import { CommonModule } from '@angular/common' ; @ Compon...

Angular 2 @Inputs - How to Passing data into Angular 2 components with @Input?

@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...