python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4

How to bind to user input events to component event handlers?

Most of the DOM events are triggered by user input and bind to these events provides a way to get inputs from a user.

The following example shows a click event binding – [on-click.component.ts]
import { ComponentOnInit } from '@angular/core';

@Component({
  selector: 'app-on-click',
  templateUrl: './on-click.component.html',
  styleUrls: ['./on-click.component.css']
})
export class OnClickComponent implements OnInit {

  welcomeMsg = '';
  constructor() { }

  ngOnInit() { }

  onClick() {
    this.welcomeMsg = 'Welcome you, Anil!';
  }
}

And on-click.component.html -
<div class="msg">
  <button (click)="onClick()">Click Me!</button>
  <p>
    {{welcomeMsg}}
  </p>
</div>
OR
<!-- Canonical form, the (on-) prefix alternative -->
<div class="msg">
  <button on-click="onClick($event)">Click Me!</button>
  <p>
    {{welcomeMsg}}
  </p>
</div>

When the user clicks the button, Angular calls the onClick method from OnClickComponent.


ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions