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!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
