Learn About Binding Event In Angular

In this article, you will learn about event binding in Angular 2/4.

This is my first article on Angular so I am explaining the DOS commands, NG CLI commands here.

Flow of the article: 

1. What is an event?
2. Angular click event diagram
3. Basic DOS command for Folder - DOS command list.
4. What do you mean by ng and ANGULAR?
5. What is ng command?
6. NG command list.

What is an event?

An event is the heart of programming. As a developer, we record and write codes as per the event of object or control. A control without an event is like a body without the soul. In this programming world, on every action, the user expects some reaction which is recorded as the event response.

There are various types of events in a web application. Please visit the following links to learn about web application events:

• https://developer.mozilla.org/en-US/docs/Web/Events
• https://www.w3schools.com/tags/ref_eventattributes.asp

With the help of the above links, you will come to know how many types of events we can code in our code.

Here, we will learn CLICK event which is a very basic yet classic major control.

Angular click event diagram

Let's start from the basics.

DOS = Disk Operating System.

DOS Command List

SR. NO.	COMMAND	DESCRIPTION
1	MD Syntax: MD <directory name> Example: md MemberAng	To make/create a directory / folder.
2	CD Syntax: CD <directory name> Example: md MemberAng	To change directory or go inside directory/folder.
3	CD.. Syntax: CD.. Example: CD..	To come out from current directory / folder.
4	RD Syntax: RD <directory name> Example: rd MemberAng	To remove / erase directory / folder.. Note: Before issue command RD that directory/folder should be empty.
5	DIR Syntax: dir Example: dir	To view files, directory and subdirectory of current folder or root folder.

What do you mean by ng and ANGULAR?

ng is the core module in Angular. We can call ng which means Angular. HTML language page is called DOM (Document Object Model). DOM is the collection of Angular tags (<>). That’s why the language name is ANGULAR.

What is ng command?

ng commands are the commands of CLI (command language interpreter). We execute the commands in Console (Black and White) DOS (Disk Operating System) mode. The following table can be seen for the list of ngCLI commands.

Ng command List

SR. NO.	COMMAND
1	ng help To get the help on commands Example: c:\> ng help   To view pagewise Example: c:\> ng help |more   To create a text file of commands. Example: c:\> ng help >ngcommandlist.txt   The above command will generate a text file of all commands displayed in ng help commands. Afterward, you can open ngcommandlist.txt file in notepad application.
2	ng new [program name] To create a new angular application. Example: ng new membersample . This will create a new Angular application named membersample.
3	ng g [scaffold name] [object name]   g : g stand for generate (to create)   Example ng g component membercomponent   Scaffoling Option List,   Scaffold Name Description & Command Component To create a new component in the Angular application.   Syntax ng g component membercomponent       Directive To create a new directive in the Angular application.   Syntax ng g directive memberdirective       Pipe To create a new pipe in the Angular application.   Syntax ng g pipe  memberpipe   Service To create a new service in the Angular application.   Syntax ng g service memberservice   Class To create a new class in the Angular application.   Syntax ng g class memberclass Guard To create a new guard in the Angular application.   Syntax ng g guard memberguard Interface To create a new interface in the Angular application.   Syntax ng g interface memberinterface Enum To create a new enumerable in the Angular application.   Syntax ng g interface memberenum Module To create a new module in the Angular application.   Syntax ng g interface membermodule

Step by step implementation of event binding in Angular using Visual Studio code. 

Step by step implementation

1. Click on Node.js command prompt to proceed.
   
   

2. Create a project folder named ”MemberAng” in command prompt.
   
   
    

Now, change the directory to newly created directory/folder called “MemberAng”.

 

Now, we pass the command to create an Angular project called “membersample”.

 

After pressing the Enter key on command, the below-given output screenshot.

 

In the above screenshot, you can see in green [ Project “membersample” successfully created].

3. Now, switch to Visual Studio code and open the following folder,
   
   

D:\Angular4\MemberAng\MemberSample

Open this folder in Visual Studio.

4. Next, you can directly see this folder in the recently opened folder list,
   
   

5. By default, our project will look like this in Visual Studio Code.
   
   

No file is opened by default.

6. Now, again, switch to the command prompt.

In command prompt, we pass this command to OPEN (EXECUTE) our project with CLI command.

ng serve open [PRESS ENTER]

 

As you have pressed enter key in console window, it generates the following screen and you see your project on browser.

In browser you have typed localhost:4200

7. Open your browser (My browser is Mozilla Developer Edition) type: localhost:4200 in address bar.
   
   
   
   
8. Now we start coding for EVENT
   
   As you know from Angular 2 version component is the heart of angular.

There is one default component created named:  ”app.component” inside

MemberSample--->SRC--->APP

First open file “app.component.html” and create html button.

<button id="btnOk" (click)="OkBtnEventCode()" style="height:50px;width:100px;font-size:14px;font-weight:bold">Click Me!</button>

In the above code, we have created an HTML button having id “btnOk” and assigned click event (click)=”OkBtnEventCode()”.

As you type and save the code, you can see the updation or refresh the browser screen to cross check of your output.

Some examples of events you can code

• (focus) - When control got focused or cursor got in the control.
• (blur) - When cursor exited from the control or lost focus from the control.
• (submit) - When submit button is pressed.
• (click) - When control is pressed with a mouse single click.
• (dblclick) - When control is pressed with a mouse double click.

 Please visit the following links to know about web application events.

• https://developer.mozilla.org/en-US/docs/Web/Events
• https://www.w3schools.com/tags/ref_eventattributes.asp

Button event coding we will do in file “app.component.ts”.

Open file “app.component.ts” file.

import {
    Component
} from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    OkBtnEventCode() {
        alert("Button Ok Clicked");
    }
}

be You can see bold letters in the above screen shot for button event methods called “OkBtnEventCode()” which will executed on button click.

OkBtnEventCode() {
    alert("Button Ok Clicked");
}

OUTPUT

On click of button, an alert window will appear. 

This is my first article on Angular. In this article, we have learned the basic commands of DOS, CLI, and other basic necessary things to start working on Angular.

You can download the source code in ZIP format.

The zipped file contains the following files.

FILE NAME	DESCRIPTION
app.component.html	Component HTML file where HTML button is created.
app.component.ts	Button event code is written in this file.
ngcommandlist.txt	Ng cli command help file.

Hope you liked this article. 

Comments are the  most valuable things for me.