How To CREATE Event Binding in Angular 5 and 4 using Visual Studio Code?
Hello guys, I’m sharing the Event Binding in Angular 5 and 4 and these events are used to perform actions and also used for user interacts with an apps.
Stayed Informed – Angular 5 and Angular 4 Documents
The events can be –
1. Mouse click
2. Mouse over
3. Keyboard movement
4. And so on
Examples –
user.component.html -
<h2>Web Links -</h2>
<div>
<ul *ngFor = "let weblink of webliks">
<li>{{weblink}}</li>
</ul>
</div>
<div><h2>Angular 5 and 4 - Event Binding</h2></div>
<div>
<button (click)="clickEvents($event)"> Please Click Me! </button>
</div>
user.component.ts -
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
//User List Array
users =['ANil Singh', 'Alok SIngh', 'Raju', 'Sunny','Mark' ,'Indian'];
//This is the web link Array;
webliks =['https://code-sample.com', 'https://code-sample.xyz', 'http://code-view.com'];
clickEvents(event) {
console.log(event);
alert("Yes, You Clicked Me! Thanks you.");
}
}
app.module.ts -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router'; //Added RouterModule
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { Component } from '@angular/core/src/metadata/directives';
@NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([{ //Added Router Module root path and component
path:'web-link',
component: UserComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The Result Looks like –
I hope you are enjoying with this post! Please share with you friends. Thank you!!