Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Event Binding in Angular 8

Event binding in Angular 8

Event binding is a data-binding from an element to a component. User actions such as keystrokes, mouse movement, clicks, and touches can be bound to the component property using event binding. In the event binding, the target will be an event name.

It is one-way data binding and sends information from the view to the component class. It is opposite of property binding. It calls the main method in the component is called when the button is clicked.

For Example

Event Binding Example

Hold a button in the HTML template and hold the click event of this button. To implement event binding, we will attach click event of a button with a method to the component.

Firstly, open the app.component.ts file and use the following code:

Import { Component } from ‘@angular/core’,
@Component({
selector: ‘app-root’,
templateUrl:’../app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
onSave($event){
console.log(“Save button is clicked!”,$event);
}
} 
event1

In app.component.html:

Event Binding Example

event2

Output:

event3

 Just click on the "Save" button and open console to see the result.

event4

Now, we could see that the "Save" button is clicked.

Event Bubbling

Event bubbling is used to identify an order in which event handlers are called when one element is nested inside a second element. And both parts have registered a listener for the event (i.e., click).

We are using a div wrapper on the button in component HTML, and div has also a click event handler. It is only to show some message if the div has been clicked.

Use the given code in app.component.ts file:

import { Component } from '@angular/core'; 
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] 
})
export class AppComponent {
onSave($event){
console.log("Save button is clicked!", $event);
}
onDivClick(){
console.log("DIV is clicked!");
}
}
event5

app.component.html:

Event Bubbling Example

event6

Output:

event7

Click on the “save" button and open the console to see the result.

event8

Here, we can see that our div message has also occurred. This is due to bubbling where we have specified onDivClick button.



ADVERTISEMENT
ADVERTISEMENT