[ad_1]
https://i.ytimg.com/vi/HMK4P_jx0y8/hqdefault.jpg

Text version of the video
http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list.html

Slides
http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list-slides.html

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

In this video we will discuss
1. Working with a select list in Angular Template Driven forms
2. How to have one of the select list option selected by default
3. How to disable select list

Let us understand working with a select element in Angular with a simple example. We want to include “Department” select list.

For the HTML used in the demo, please refer to my blog using the link below
http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list.html

At the moment, we have hard coded the select list options in the HTML. In our next video we will discuss, how to get the select list options from the component class. Notice each option also has a corresponding value. The value is the department id which is what we want to save in the database table when the form is submitted. We will discuss, saving the data to a database table in a later video.

At this point, when we select an option, the corresponding option value is included against the “department” property in the Angular auto-generated form model.

Also when we click the “Save” button, the “department” property along with the selected option value is logged to the console in browser developer tools.

How to have one of the select list option selected by default

If we include “selected” attribute on one of the options of the select list, we expect that option to be selected by default when the form initially loads, but when the form reloads, the respective option will not be selected.

If you remove the “ngModel” directive from the select list, then the the option gets selected as expected.

In Angular, we use “ngModel” directive for two-way data binding. So the moment we put it back in place the “selected” attribute does not work. To make it work include “department” property in the component class and initialise it with one of the option value which you want to have selected by default. In our case, we want the “IT” option to be selected by default. The “IT option value is “3”. So, I have initialised “department” property with a value of ‘3’

department = ‘3’

At this point you will have “IT” option selected by default when the form loads. Now, even if we remove the “selected” attribute from the “IT” option, it is still selected by default when the form loads. This is because of the two-way data binding that we get with “ngModel” directive.

How to disable a select list : To disable a select element, use the disabled attribute

Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the “department” select element is disabled, it will not be included in the Angular generated form model.

In our form, we do not want the select element to be disabled, so please remove the disabled attribute. Also, we do not want any option to be selected by default, so remove the “department” property from the component class.

In our next video, we will discuss, how to get the select list options from the component class, instead of having them hard-coded in the HTML.

Original source