Angular Dropdown Component with Examples

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?

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.

If you wish to learn more about Angular framework, then check out our Angular Certification Training course online 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.

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>

<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>