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';

  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>
<!-- Canonical form, the (on-) prefix alternative -->
<div class="msg">
  <button on-click="onClick($event)">Click Me!</button>

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


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 - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions