How To Work With Dropdown In Angular 2, 4 Using Visual Studio Code

Introduction

A few months ago, I wrote an article based on Angular 2 for beginners and today in this article, we will learn about Angular 2 with TypeScript to bind dropdown and select value from dropdown. Angular dropdown is not any big deal; it's the same as Angular 1 but here there are some differences of approach. If you are a beginner in Angular, you need to go through the article "Getting started with Angular2 using Visual Studio code"

How to create architecture of application -- you can go through the given link click here.

Here some prerequisites if you are going to create an Angular 2 or 4 application. To bind dropdown, we need to follow only 3-4 simple steps in Angular 2 or 4 using TypeScript.

Step 1

Create Angular application using TypeScript.

Prerequisites

Install Nodejs, NPM on your system. Resource https://nodejs.org/en/
Install Visual Studio Code on your machine. Resource https://code.visualstudio.com/
Use the latest version of NPM and VS Code.

Step 2

Configure as per project requirement (component, HTML page, routing, module, etc....).

Step 3

Create service to get data from API and store in an object. If you are not using service to get data, just create a simple array list to store information.

Step 4

So far, I hope you have configured your application with all dependencies; if not, I would like to refer you to this article to create a simple architecture using system.js, config.js.

Create a simple Angular application for Hello World

Step 5

Create a function inside your component.ts (see the code given below). Now, I am going to explain some basic points carefully.

Component Component is just like a TypeScript class which is using @component decorator. We can create function and logic here to create any event, variable, property.

Module Module is just the starting point of application where we have to inject all components, services, and pipes etc.

Decorator Decorator is used to define behavior of typescript class. In Angular 2 and 4 multiple decorator are there. e.g. -

@Domponet

@Pipe

@ngModule

@ Directive and more..

each one is used in the top of the typescript class to define behavior and nature of the class.

import {
Component,
ViewEncapsulation
} from '@angular/core';
import {
MyCodeService
} from '../../../../_services';
import {
Router
} from '@angular/router';
@Component({
selector: 'Home-component',
templateUrl: './Home.component.html',
encapsulation: ViewEncapsulation.None
})
export class HomeComponent {
nameList: any;
nameId: Number;
constructor(private _myCodeService: MyCodeService) {
this.getNameList();
}
getNameList() {
this._myCodeService.getNameList().subscribe(data => {
this.nameList = data;
});
}
selectName() {
alert(this.nameId);
}
}

Or if you are not using service and want to bind dummy data in dropdown (see given below code). I have created a dummy JSON which contains Name and Id of two fields, and fields are key pair value.

import { Component, ViewEncapsulation } from '@angular/core';
import { MyCodeService } from '../../../../_services';
import { Router } from '@angular/router';
@Component({
selector: 'Home-component',
templateUrl: './Home.component.html',
encapsulation: ViewEncapsulation.None
})
export class HomeComponent {
nameList: any;
data:any;
nameId:Number;
constructor( private _myCodeService : MyCodeService ) {
this.getNameList();
}
getNameList()
{
this.nameList= this.data;
}
selectName()
{
alert(this.nameId);
}
this.data=[
{
"Id": 3,
"Name": "Attorney Case"
},
{
"Id": 1035,
"Name": "bikesh appeal"
},
{
"Id": 22,
"Name": "BikeshAppeal"
},
{
"Id": 20,
"Name": "Case Info"
},
{
"Id": 15,
"Name": "Case Infoe"
},
{
"Id": 11,
"Name": "Case Prep"
}
]
}

So in this component, I am going to bind dropdown. Once the component loads, you can replace according to your requirment. As per the above code, you need to set JSON key pair value in an array list.

Step 6

Create an HTML page and dropdown element to bind data (see code given below). You can see in the given code, I am using <select> element. This element is used to iterate the value and populate in options.

<div class="box-header with-border">
<div class="form-group voffset row">
<label for="" class="vertical-label col-sm-4 col-md-8 text-right"> Select Name</label>
<div class="col-sm-8 col-md-4">
<select id="Id" #Id="ngModel" class="hideLabel form-control" [(ngModel)]="nameId" name="Id" (change)="selectName();">
<option selected="" value=""></option>
<option [ngValue]="k.Id" *ngFor="let k of nameList">
{{k.Name}}
</option>
</select>
</div>
</div>
</div>

Now, data is ready to populate data in dropdown. *ngFor: is used to iterate data from array.

[(ngModel)]: is use to control data and pass selected value from View to component to View and View to component (Two way binding).

And also, I created a function to get selected value from dropdown on change event of element. (change) is used to fire event.

So with selectName() we are able to get selected Id from HTML element.

It's a very simple and fast way to bind dropdown in angular2 or 4 within 5 minutes.

Other References

I hope you guys learned the approach to bind value, call function, use service and get selected value from dropdown.