Angular - how to set a default option in a dropdown list

Question

I'm trying to implement a dropdown list with ngfor, but I have two issue.

I don't get a default value selected on the first element. The array is having 4 element. With the first ngFor at the mat-select I want to select 4 items and the first item preferably being selected per default.
There is being shown an unwanted empty arrow (line) at the end.

could someone please suggest a better solution. This is my implementations, which I have done after browsing so many post on SO on this topic.

  <mat-select *ngFor="let level of myArray; let i=index " placeholder="{{myArray[i+1].name}}">
           <mat-option *ngFor="let child of level.children | keyvalue" value="{{child.value.name}}" >
              {{child.value.name}}
           </mat-option>
            {{level.name}}
  </mat-select>

What default value should be? and on which place first or second? or on which Item? We need more information. — James Delaney, Mar 14 '19 at 21:35

James Delaney · Answer 1 · 2019-03-14T22:15:19.840

0

Try to bind value with name: [value]="{{child.value.name}} instead of value="{{child.value.name}}"

That is in this line of code:

<mat-option *ngFor="let child of level.children | keyvalue" value="{{child.value.name}}" >

edited Mar 14 '19 at 22:15

answered Mar 14 '19 at 21:38

James Delaney

1,765
1
17
36

Is this a duplicate? https://stackoverflow.com/questions/17815036/setting-default-value-in-select-drop-down-using-angularjs – adelpreore Mar 14 '19 at 22:18
1

@adelpreore Nope it is not. ng-model is not needed in Angular material for default selection. – Abhijeet Chakravorty Mar 14 '19 at 22:24

score 0 · Answer 2 · answered Mar 14 '19 at 22:18

0

Provide the [(value)]='myDefaultValue on your <mat-select> and in your component.ts add the variable myDefaultValue = level.children[0].value.name

answered Mar 14 '19 at 22:18

Bogdan B

846
9
23

@Nikola and Bogdan I will also try to check with your suggestions. – Mar 14 '19 at 22:49

Abhijeet Chakravorty · Accepted Answer · 2019-03-14T22:45:09.770

I hope you have the html and the array structure like this. If not please help me out I shall tweak the array structure as per your data.

// CSS
 .drop-down-selection{
     min-height: 30px;
     border: 1px solid #000;
     margin-top: 10px;
     margin-bottom: 10px;
  }
<mat-select *ngFor="let level of myArray; let i=index" placeholder="{{level.name}}" class="drop-down-selection" [(value)]="level.children[0]['name']">
   <mat-option *ngFor="let child of level.children | keyvalue" value="{{child.value.name}}">
      {{child.value.name}}
   </mat-option>
</mat-select>


    this.myArray = [
                    {
                           name: 'A',
                           children: [
                                   {
                                           name: 'One',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'Two',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'B',
                           children: [
                                   {
                                           name: 'three',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'four',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'C',
                           children: [
                                   {
                                           name: 'five',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'six',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'D',
                           children: [
                                   {
                                           name: 'seven',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'Two',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'E',
                           children: [
                                   {
                                           name: 'eight',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'nine',
                                           desc: 'No description'
                                   }
                           ] 
                    }
            ];

Let me know if this does not work. I shall tweak something otherwise.

Abhijeet Chakravorty: I tried your suggestion on the html, but not is appearing now. — , Mar 14 '19 at 22:34
@user10489212 Anytime . Please do not forget to mark the answer correct if it works for you. Thank you . — Abhijeet Chakravorty, Mar 14 '19 at 22:35
@user10489212 I shall attach the screenshot it works for me. At which point are you facing the problem? — Abhijeet Chakravorty, Mar 14 '19 at 22:41
Yes, please. I would like to see it. I get nothing being displayed. I haven't debugged. — , Mar 14 '19 at 22:44
@user10489212 Please check. I have attached the screenshot in the answer area. — Abhijeet Chakravorty, Mar 14 '19 at 22:45
I will try a few things and see what goes wrong that it doesn't work for me. Appreciate your time. :) — , Mar 14 '19 at 22:48
@user10489212 No problem. Happy to help. I am here please feel free to ping if you still face problems. — Abhijeet Chakravorty, Mar 14 '19 at 22:50

Angular - how to set a default option in a dropdown list

3 Answers3