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?
Σχόλια