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.

@Component(

{ 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).

Class

export class ManageEventsComponent implements OnInit {

constructor() { } ngOnInit():

void { } onClick(textInput){ console.log(‘Click Event :-’ + textInput); }

}

You can check mentioned example in below file.

https://github.com/Sourabhhsethii/Let-Us-Start-With-Angular/blob/master/Angular-Series-A3-Mange-Events/src/app/manage-events/manage-events.component.ts

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.

https://github.com/Sourabhhsethii/Let-Us-Start-With-Angular/tree/master/Angular-Series-A3-Mange-Events

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?