How to create a Dropdown Box using Angular?

Learning and perfecting how to do certain everyday tasks using Angular can boost your career pretty fast, especially if you’re new in the web-development career. In this article, we will be discussing, about one such task that a developer must have done thousands of time: creating a humble dropdown box. The following topics will be covered in this blog:

• What is Angular?
• What is a Dropdown Box?
• Creating a Dropdown Box Using Angular.

What is Angular?

Well, if you’re reading a blog about how to make a dropdown box using Angular, it can be assumed that you already have a general idea of Angular. For those of you who don’t and have stumbled upon this blog due to the whims and fancies of the internet, Angular is a front-end development framework. It is developed and maintained by the tech giant, Google. It provides a modular way to develop single-page web applications like Gmail, PayPal and Lego. Applications built using Angular implement the Model-View-View-Model approach.

What is a Dropdown Box?

A drop-down box is a clean method of showing an array of option since only one choice is displayed initially until the user activates the dropdown box. To add a dropdown-box to a web page, you would use a select element or a list-item. The first <option> tag in the select element needs to have the selected option set to the value of selected. Here’s a little code snippet to show you what I mean.

<select name="demo" id="#">
<option selected="selected" value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>

Of course, the above code would need its specific javascript to have expected behaviour, but the basic skeleton of a dropdown menu remains the same. Let’s see how we do this in Angular now.

Dropdown Box Using Angular

Honestly speaking, it would be rather daunting to demonstrate all the possible ways to implement a dropdown-box in angular. Every developer’s brain handles the logic in its own unique way and I’ve seen some crazy dropdown menus in my career. I’m going to be humble and show you guys a rather basic dropdown-menu approach. Check out this Full Stack developer course to learn more about Angular.

Method 1: Making a Dropdown List Using ng-options 

You can use the ng-options directive to create a dropdown menu out of an array or list of items.

<div ng-app="demo" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>

var app = angular.module('demo', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Demavand", "Pradeep", "Ashutosh"];
});
</script>

Method 2: Making a Dropdown List Using ng-repeat

Angular being a versatile framework, obviously has multiple ways to create a basic dropdown menu. The ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options and has one important advantage i.e  dropdown menus made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

This particular code snippet implements the same list using ng-repeat

<div ng-app="demo" ng-controller="myCtrl">

<select>
<option ng-repeat="name in names">{{name}}</option>
</select>

</div>

<script>
var app = angular.module('demo', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Demavand", "Pradeep", "Ashutosh"];
});
</script>

This brings us to the end of this rather short blog “dropdown list using angular”. I hope now you have an idea of how you could implement a dropdown menu in your very own project. If you have any doubts regarding this blog you can post them as a comment in the comment section below. You could also share your own creative way of making a dropdown box too.

If you wish to learn more about Angular framework, then check out our Angular Certification which comes with instructor-led live training and real-life project experience. This training will help you understand Angular in-depth and help you achieve mastery over the subject.

Got a question for us? Please mention it in the comments section of ” Angular Dropdown” and I will get back to you.