CODEWITHSUNDEEP
javascriptangularjsnode.jsbootstrap-4
TennisHead
TennisHead

Reputation: 28

Angular select does not populate options

I am trying to learn nodejs. I have a simple application where I have defined an array options in app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  options = ["Option1", "Option2"];
}

and I am trying to expose the options as dropdown app.component.html

<div style="text-align:center">
  <h1>
    {{options}}!
    <select name="repeatSelect" id="repeatSelect" ng-model="app-root">
      <option ng-repeat="option in options" value="{{option}}">{{option}}</option>
    </select>
  </h1>

For some reason the selectbox is not getting populated. If I print the options I can clearly see that it print fine. Here is the screenshot

enter image description here

Upvotes: 0

Views: 631

Answers (2)

Dinesh undefined
Dinesh undefined

Reputation: 5546

You should use *ngFor . Because you are using angular 4. There is no ng-repeat directive in angular 2/4/5. 

<option *ngFor="let option of options" value="{{option}}">{{option}}</option>

Upvotes: 1

Jomy Joseph
Jomy Joseph

Reputation: 331

Try

<div style="text-align:center">
  <h1>
    <select name="repeatSelect" id="repeatSelect" >
      <option *ngFor="let option of options;" value="{{option}}">{{option}}</option>
    </select>
  </h1>

Upvotes: 0

Related Questions