Bind Select DropDown List in Angular 4 and 5

Earlier I posted about how to bind select dropdown list in Angular 2, but its time to upgrade to Angular 5 as Angular 5 is the recent released version. Although angular 5 is the recent version, but Angular 4 is still used in many projects. So in this post, we’ll find out how to bind select dropdown list in Angular 4 and 5.

Bind Select DropDown List in Angular 4 and 5

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

We’ll take advantage of SPA templates provided in Visual Studio 2017 for creating Angular app. First, let’s see the solution using Angular 4. To use Angular 4 SPA templates, following installation is required (if not installed).

• Node.js
• .NET Core 2.0
• Visual Studio 2017 Community. If already installed, then update it to the latest version.

Bind Select DropDown List in Angular 4

Open Visual Studio 2017. Hit File->New Project -> Select ASP.NET Core Web Application. Enter the project name and select the path where you wish to create this project. When you hit “OK”, you should see the following dialog box.

Select Angular from this dialog and Say “OK”. The Visual Studio will create an ASP.NET Core 2.0 based project with Angular 4 configured. You should see the following project structure.

The project structure looks familiar with Controller, Views and wwwroot folder. The ClientApp folder contains the angular app. You can also see webpack.config.js at the root of the application, which tells you that webpack is being used by this project as module bundler. This file instructs webpack about how to bundle the client code.

Lets run the application and you should see the following in your browser.

Let’s extend this application a bit. Here, the fetch data component calls an API to get random weather forecasts. Like,

Let’s add a dropdown on top of the grid to filter the data based on the selected value. Below is the API code to return summary list and weather forecasts. The new API added to the sample code is GetSummaries()

Next is the updated code of fetchdata.component.ts. The constructor now calls the GetSummaries, along with WeatherForecasts API. There is also a method defined filterForeCasts which gets called on change event of the dropdown. This method filters the forecasts list based on the selected value and then returns the result.

Lastly, put this HTML in fetchdata.component.html to show the summary dropdown.

Run the application and navigate to fetch data. You should see a dropdown having list of all the summaries. Changing the selection will also update the weather forecast grid.

Now, lets see the same application using Angular 5.

Bind Select DropDown List in Angular 5

The new Angular 5 template is available with the ASP.NET Core 2.1 release and ASP.NET Core 2.1 preview 1 is recently released. Therefore, to use the new Angular 5 template, following installation is required.

• Download .NET Core 2.1 Preview 1, on Windows, MacOS, and Linux:
  • .NET Core 2.1 Preview 1 SDK — includes the Runtime
  • .NET Core 2.1 Preview 1 Runtime
• Visual Studio 2017 15.6 Preview 6 or later: Don’t worry. Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.

Once both the installations are finished, open Visual Studio “Preview” version, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you should be prompted with the following,

Make sure to select “ASP.NET Core 2.1” from the version dropdown and choose Angular. The Visual Studio will create an ASP.NET Core 2.1 based project with Angular 5 configured. You should see the following project structure.

When you run the app, you should see following in the browser.

Similar to Angular 4 solution, let’s add a dropdown on top of the grid to filter the data based on the selected value. Below is the API code to return summary list and weather forecasts. The new API added to the sample code is GetSummaries()

Next, update the code of fetchdata.component.ts to call the GetSummaries, along with WeatherForecasts API. We also need to define another method to filter the forecast based on the selected value in the dropdown.

Here, the difference between Angular 4 and Angular 5 solution is the use of HTTP service to call the web API. In Angular version 4.3 HttpClient was shipped in @angular/common as a smaller, easier, and more powerful way to make web requests in Angular. The new HttpClient has gotten some great praise from developers, so HttpClient is recommended by the Angular team for all applications, and @angular/http library is deprecated. You can notice the difference in the constructor.
The angular 4 app code is,

constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
    http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
        this.forecasts = result.json() as WeatherForecast[];
    }, error => console.error(error));
}

And angular 5 app code looks like,

constructor(httpClient: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    httpClient.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
        this.forecasts = result;
    }, error => console.error(error));
}

Lastly, put this HTML in fetchdata.component.html to show the summary dropdown.

Run the application and navigate to fetch data. You should see a dropdown having list of all the summaries. Changing the selection will also update the weather forecast grid.

That’s it.

Conclusion

To conclude, we saw how to bind select dropdown list in Angular 4 and 5 using SPA templates provided by .NET. There are no major code differences between these 2 versions except to switch from Http Service to HttpClient Service.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then