Skip to main content

Posts

Showing posts with the label Actions of Event Binding

Angular 4 Property Binding and Examples

What Is Property Binding? Property binding allows you to define an element attribute values from the component and its one-way data binding and also you can only set the data from the component to the view. Example As – Parent Component class Is - import { Component , Input } from '@angular/core' ; @ Component ({   selector: 'parent-Component' ,   template: 'Its Comes from parent: {{InputTextUser}}' }) export class ParentComponent {   @ Input () InputTextUser ; } And The Child Component Class Is - import { Component } from '@angular/core' ; @ Component ({   moduleId: module . UserId ,   selector: 'child-Component' ,   template: `       <parent-Component [InputTextUser]="txtUser"></parent-Component>       <span [InputTextUser]="txtUser"></span>   ` }) export class ChildComponent {   txtUser = 'Anil' ; ...

Actions of Event Binding - Angular 4

In an event binding , Angular sets up an event handler for the target event. Example looks like - import { Component , OnInit } from '@angular/core' ; @ Component ({   selector: 'on-click' ,   template: `<div>         <div><button (click)="onClick($event)"> keyup here.</button> <p>{{message}}</p></div>         <div><input (keyup)="onKey($event)"> <p>{{values}}</p></div>  </div>` }) export class clickComponent {   values = '' ;   onClick ( event ) {     console . log ( event );   }   onKey ( event : any ) {     //without type info     this . values += event . target . value + ' | ' ;   } } Example 2 – dblclick keypress import  {  Component ,  OnInit  }  from   '@angul...