top of page
  • Writer's picturesourabhh sethii

A3 - Angular Series : Manage-Events

Welcome you all to the third article on the Angular Article Series, we will discuss following topics

1) How to Manage Events in Angular 2) How to reference the value in Angular 3) Example @ GitHub

Create A Project — You can check article on creating the project. Click Here.

Create A Component — You can check the article on creating a component . Click Here.

Mange Events

In Component Decorator, we have mentioned inline html and inline style along with selector name, you can use this angular selector name in the another components where you want to use this components.

{ selector: ‘app-manage-events’,
template: ` <div><input #textInput type=”text”><button (click)=”onClick(textInput.value);”> Click Event</button> </div> `,
styles: [ ]}

Click event on button will take the the input and call onClick Function;

<button (click)=”onClick(textInput.value);”> Click Event</button>

Reference the value You can reference the value of input by using reference operator (#).And providing the reference variable to it such as in below example #textInput.

<input #textInput type=”text”>

value of reference variable can be access in click event by using .value as shown in example (textInput.value passing in onClick function).


export class ManageEventsComponent implements OnInit {
constructor() { } ngOnInit():
void { } onClick(textInput){ console.log(‘Click Event :-’ + textInput); }

Output Screen

You can check in below output screen the sample code, application with text input and click button, Console. On click of button onClick(textInput) function is called and it is printing value of textInput in console.

Repository : You can clone below repository and run the application to check the demo.

Interview Questions : Question 1) What is reference operator ? Question 2) How to handle click event ? Question 3) How to pass reference value in click event?

28 views0 comments

Recent Posts

See All

Angular : Lazy-loading-ngmodules

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules loads. Lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps kee


Post: Blog2_Post
bottom of page