Please Like and Share

I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

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.

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.

1.import {

2. Component,

3. ViewEncapsulation

4.} from '@angular/core';

5.import {

6. MyCodeService

7.} from '../../../../_services';

8.import {

9. Router

10.} from '@angular/router';

11.@Component({

12. selector: 'Home-component',

13. templateUrl: './Home.component.html',

14. encapsulation: ViewEncapsulation.None

15.})

16.exportclass HomeComponent {

17. nameList: any;

18. nameId: Number;

19. constructor(private _myCodeService: MyCodeService) {

20.this.getNameList();

21. }

22. getNameList() {

23.this._myCodeService.getNameList().subscribe(data => {

24.this.nameList = data;

25. });

26. }

27. selectName() {

28. alert(this.nameId);

29. }

30.}

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.

1.

2.import { Component, ViewEncapsulation } from '@angular/core';

3.import { MyCodeService } from '../../../../_services';

4.import { Router } from '@angular/router';

5.@Component({

6.selector: 'Home-component',

7.templateUrl: './Home.component.html',

8.encapsulation: ViewEncapsulation.None

9.})

10.exportclass HomeComponent {

11.nameList: any;

12.data:any;

13.nameId:Number;

14.constructor( private _myCodeService : MyCodeService ) {

15.this.getNameList();

16.}

17.getNameList()

18.{

19.this.nameList= this.data;

20.}

21.selectName()

22.{

23.alert(this.nameId);

24.}

25.this.data=[

26. {

27."Id": 3,

28."Name": "Attorney Case"

29. },

30. {

31."Id": 1035,

32."Name": "bikesh appeal"

33. },

34. {

35."Id": 22,

36."Name": "BikeshAppeal"

37. },

38. {

39."Id": 20,

40."Name": "Case Info"

41. },

42. {

43."Id": 15,

44."Name": "Case Infoe"

45. },

46. {

47."Id": 11,

48."Name": "Case Prep"

49. }

50. ]

51.}

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.

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

You have just read an article that categorized by title Angular
by title How To Work With Dropdown In Angular 2, 4 Using Visual Studio Code. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2017/09/part-51how-to-work-with-dropdown-in.html. Thank You!

Author: Bikesh Srivastava - Tuesday, 5 September 2017

There are currently no comments for "How To Work With Dropdown In Angular 2, 4 Using Visual Studio Code"