Angular 6 HTML select menu set default value

Question

I'm used to the older angularjs way of doing select menus and selecting the default value etc and am having trouble wrapping my head around how to do this in Angular (6).

I have a an array of menu items:

  fontChoices = [
    {
      label: 'Trebuchet',
      value: "'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif"
    },
    {
      label: 'Georgia',
      value: 'Georgia, times, serif'
    }
 ];

and a variable to hold the chosen font: brandFont

My html menu is

<select [(ngModel)]="brandFont"
        id="brandFontmenu"
        (ngModelChange)="setStyle($event,'--font-family-brand')">
   <option *ngFor="let font of fontChoices"
           [value]="font.value">{{font.label}}
   </option>
</select>

The menu works, displays my fontChoices, and changing the selection fires my function. I can choose Georgia or Trebuchet and the css variable changes and the page updates as it should.

  setStyle(e, which) {
    document.documentElement.style.setProperty(which, e);
  }

On page load, the css variable is set to Trebuchet. Which I can get in ngOnInit with

this.brandFont = String(styles.getPropertyValue('--font-family-brand')).trim();

My question is, how do I get the select menu to display this first choice on page load? I have tried this.brandFont = this.fontChoices[0]; but the menu selected item is empty until something is chosen from the menu.

Rohit.007 · Accepted Answer · 2018-06-26 17:18:59Z

6

Just change your one statement

this.brandFont = this.fontChoices[0] to this.brandFont = this.fontChoices[0].value;

https://angular-qlr8fj.stackblitz.io

answered Jun 26, 2018 at 17:18

Rohit.007

3,5123 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abel Valdez · Accepted Answer · 2018-06-26 17:15:04Z

4

Use an option with the first value like this <option [value]="defaultFont.label" selected="selected">{{defaultFont.label}}</option>

Component HTML

<select [(ngModel)]="brandFont"
        id="brandFontmenu"
        >
   <option [value]="defaultFont.label" selected="selected">{{defaultFont.label}}
   </option>
   <option *ngFor="let font of fontChoices.slice(1)"
           [value]="font.label">{{font.label}}
   </option>
</select>

Component ts

  brandFont: any; 
  defaultFont: any;

  ngOnInit() {
    this.defaultFont = this.fontChoices[0];
    this.brandFont = Object.assign(this.defaultFont.label);
  }

Here is a demo stackblitz

edited Jun 26, 2018 at 17:15

answered Jun 26, 2018 at 16:57

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

3 Comments

Steve Over a year ago

That gives me 2 Trebuchets, and choosing an item from the menu makes it go blank. Even on the Stackblitz

Steve Over a year ago

That fixed the duplicate, but after choosing an item on the menu the menu selected item is empty. And then if you open the menu again, Trebuchet is gone. see jmp.sh/dSAPrFS

Steve Over a year ago

Actually, the answer @rohit.007 below works perfectly, just by adding 6 characters to what I had.

Collectives™ on Stack Overflow

Angular 6 HTML select menu set default value

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related