Angular2 :"Select" option should be selected and visible by default

Question

Facing issues for select option in angular2.It is not selected and visible by default.It is working in IE browser but not in other browser.

country.html :

<label class="control-label  col-sm-offset-1  col-sm-2 bodySmall" for="country">Country:</label>
                <div class="col-sm-3" [ngClass]="{ 'has-error': country.errors  && (country.dirty || country.touched)}">
                    <select class="form-control bodySmall" id="country" [(ngModel)]="model.country" name="country" #country="ngModel" required>
                        <!--required-->

                        <option value="" selected="selected">--Please select a Country--</option>
                        <option *ngFor="let c of countries" [value]="c">{{c}}</option>
                    </select>
                    <div *ngIf="country.errors && (country.dirty || country.touched)" class="help-block">
                        <div [hidden]="!country.errors.required">Country is required.</div>
                    </div>
                </div>

Answer 1

If you are wanting to have a non-selectable item(user cannot manually select it) preselected by default, then try something like this:

<option disabled hidden [value]="undefined">Please select a Country</option>

The [value]=undefined can make it preselected if you don't populate a valid value. The disabled and hidden make the option not manually selectable by the user.