Angular set dropdown select option as default selected before iteration

3
votes

I have a select dropdown and I iterate the options from a list. I am trying to set as selected a separate option (as a default), in case of user is not selecting a value.

Here is how I am trying to implement that:

<select [(ngModel)]="book.pageLayout">
    <option [value]="0" [attr.selected]="book.defaultLayoutId === null">No Default Layout</option>
    <option *ngFor="let l of availableLayouts"
            [value]="l.id"
            [attr.selected]="book.pageLayout == l.id">
      {{l?.name}}
    </option>
  </select>

I also tried:

<option [value]="0" selected="selected">No Default Layout</option>

and even:

<option [value]="0" selected="1==1">No Default Layout</option>

but none of the above worked.

Any help is welcome

5
angulardrop-down-menuhtml-select

5 Answers

8
votes

Attribute selected will not help much if you are using ngModel then you can do easily with setting default value to the defined model.

<select [(ngModel)]="book.pageLayout">
  <option value="">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

Then inside component.ts

public book: any = {
   pageLayout: ''
}

Edit

To set default option we need to set pageLayout value to id instead of empty string.

public book: any = {
   pageLayout: 1
}

public availableLayouts: any = [
  {
    name: "One",
    id: 1
  },
  {
    name: "Two",
    id: 2
  }
]
4
votes

You can use FormControl from Angular Reactive Form.It is easy. Angular Docs About Reactive Form You need to import reactive form to you module 

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Than you need to create FormControl in you component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

After this you need to set Form control to your element select in html

<select [formControl]="name">
  <option value="null">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

If you need default value of select you must create formControl with value for example:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl(null);
}

///(you can pass any to new FormControl(0), or new FormControl(false), new FormControl('string'))

In this case default value for select will be null.And options with value null will be selected in dropdawn.

In you case new FormControl(0) as default value.

0
votes

Try this <option [value]="undefined" selected>No Default Layout</option>, it should work.

0
votes

try code:

this.fullNamePresentors = this.programInfo1.filter(item => item.time >  this.fulltextDate);

and:

  <select class="form-control" id="marasemaat" style="margin-top: 10%;font-size: 13px;" [(ngModel)]="fullNamePresentors" [formControl]="stateControl"  
    (change)="onSelect($event.target.value)">
    <option *ngFor="let char of programInfo1;let i = index;"  onclick="currentSlide(9,false)" value={{char.id}}>{{char.title + " "}}  ----> {{char.name + " "+ char.family }} ---- > {{(char.time.split('T', 2)[1]).split(':',2)}}</option>

  </select>