Angular Event Binding

Angular 5 and 4 - Event Binding Example

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 {RouterModulefrom '@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 –
The Video Example looks like –
 I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^