• Monday , 13 July 2020

Angular bootstrap select list

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

3d Ocean

Related Posts

10 Comments

  1. Rich
    May 31, 2019 at 16:10

    I'm working with a reactive form, so I didn't want to use ngModel. If anyone knows how to do the same thing with reactive forms, plz reply. I'm having trouble with it.

  2. sai prasanna kumar
    May 31, 2019 at 16:10

    great work

  3. Meenal Mishra
    May 31, 2019 at 16:10

    How can I get all the objects of Department in my parent list like id , departmentName

  4. Denis Yovani Salmerón Cruz
    May 31, 2019 at 16:10

    you only reuse the < > at 2:10

  5. Kishore Tangudu
    May 31, 2019 at 16:10

    I want one example with multiselect. Can you please help me with that?

  6. Subin Y.
    May 31, 2019 at 16:10

    very good job!!

  7. Belmiris
    May 31, 2019 at 16:10

    Very nice. Thank you.

  8. Bir Gorkhali Gaming
    May 31, 2019 at 16:10

    Please do mvc core

  9. Nepali Whitehat
    May 31, 2019 at 16:10

    Sir i want donate you some money plz give it chance because u teaches me a lot

  10. barichnel
    May 31, 2019 at 16:10

    first comment.. was here before 90

Leave A Comment

You must be logged in to post a comment.