Give placeholder to select in Angular 6

Question

I have a select option in which i want to give placeholder which says \"select a category\"

Answer 1

If you want the first value to be selected when Category is still undefined, you can assign the value undefined to the first option with ngValue:

<option [ngValue]="undefined" hidden>Select one category</option>

Answer 2

Try out your code as given below, you have to add template variable to the code and assign it as the value then it will work.

<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" #category="ngModel" required>
                    <option value="category" disabled hidden>Select one category </option>                                     
                     <option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
                </select>

Answer 3

You can use [value]="" selected hidden

I have create a demo on Stackblitz

<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
    <div class="form-group row">
        <div class="col-xl-4 col-lg-6 col-md-12">
            <fieldset class="form-group">
                <label for="customSelect">Categories:</label>
                <select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
                    <option hidden [value]=""  selected>Select one category </option>
                    <option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
                </select>
            </fieldset>
        </div>
    </div>
    <button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>

Answer 4

Since you're using ngModel, to be selected by default the value attribute of the option tag and the initial category value in the component class must be the same. And to make it hidden in the list you can use hidden attribute. For the consistency of validation issues the best way is to use ngValue instead of value.

in the component:

category: string = null;

in the template:

<option [ngValue]="null" hidden>Select one category </option>

Answer 5

This worked for me. I've used the first option value as placeholder.

<div class="form-group">
     <label for="homeType">Example select</label>
     <select class="form-control" id="homeType" ngModel="1" name="homeType" required>
     <option  [disabled]="true" value="1" selected>{{ placeholder.select }}</option>
     <option value="house">House</option>
     <option value="flat">Flat</option>
     <option value="townHouse">Town House</option>
     </select>
</div>

Answer 6

for a template driven angular form you may want to consider this demo. you can find the code here

for a simple html form here is a snippet.

<form>
    <select required>
        <option value="" disabled selected hidden>Select a value</option>
        <option value="0">option 1</option>
        <option value="1">option 2</option>
    </select>
</form>

<option value="" disabled selected hidden>Select your option</option>