CODEWITHSUNDEEP
angularangular2-templatedropdown
joesan
joesan

Reputation: 15345

Angular Drop Down Not Showing Elements

In my html component, I have the following:

        <select class="hideLabel form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType" (change)="selectName();">
          <option selected="" value=""></option>
          <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
            {{ powerPlantType }}
          </option>
        </select>

It displays fine as it can be seen from the screenshot below:

enter image description here

How do I add a message that says "--Select Type--" text when the page is loaded?

EDIT: Based on the suggestions from the post below, I could still not get it to work: So when the page loads the dropdown is still empty without the intended default test "--Select Type--"

enter image description here

But the test seem to appear when selcting the drop down!

enter image description here

I would rather like to have it like this when the page is loaded:

enter image description here

Upvotes: 0

Views: 1579

Answers (1)

FAISAL
FAISAL

Reputation: 34673

Change your html to following: 

<select class="hideLabel form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType" (change)="selectName();">
    <option selected="" value="">--Select Type--</option>
    <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
        {{ powerPlantType }}
    </option>
</select>

Upvotes: 1

Related Questions