How to set a Placeholder in Select/Option with NgModel in Angular2 (7)?

Related searches

I need to set a default value/placheholder in my select option, it looks easy to do but I wasn't able to do it. I've tried different things but I got the same result.

<select class="form-control border custom-select" [compareWith]="compareFn"
        [(ngModel)]="skill.category">
    <option selected disabled="disabled">Chose a category...</option>
    <option *ngFor="let cat of categories" [ngValue]="cat"
            [hidden]="cat.id === 1">{{cat.name}}</option>
</select>

compareFn(c1: Skill, c2: Skill): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

My output is something like this:

  • [CATEGORY id=1] default //I want this to be totaly hidden (id=1 hidden)

  • dropdown {

  • [Chose a category...]

  • [CATEGORY id=2]

  • [CATEGORY id=3]

  • [CATEGORY id=4]

  • ... } end dropdown

To achieve expected result, use slice pipe

  1. slice: 1 - if the value to be removed is always first option

<select class="form-control border custom-select">
    <option selected disabled="disabled">Chose a category...</option>
    <option *ngFor="let cat of categories| slice:1" [ngValue]="cat">
      {{cat.name}}</option>
</select>

How to set a Placeholder in Select/Option with NgModel in Angular2 , You could set the default value of the <select> by setting the value of <select class='select-option' required [(ngModel)]='optionSelected'� Learn how to use them in Angular. We will show you how to set the Default Value for the select. Listen to the Select option change event and react to it. Dynamically update the Dropdown list option & Dynamically Set Value etc. We will cover both Reactive Forms & Template-driven forms. Applies to: Angular 2 to the latest edition of i.e. Angular 8.

in template you can in many ways, one more is:

<select class="form-control border custom-select" [compareWith]="compareFn"
        [(ngModel)]="skill.category">
    <mat-label>Chose a category...</mat-label>
    <ng-container *ngFor="let cat of categories" >
       <option *ngIf="cat.id !== 1" [ngValue]="cat">{{cat.name}}</option>
    </ng-container>
</select>

use mat-label if the value od the disabled option is not a valid option, the user must not be able to select a not valid option do you really need the value of the selected to be the entire object? or better removing before template

http.get<cat[]>('url').pipe(
   map(list => list.filter(one => one.id !== 1))
).subs...

or even better removing from query in the database

Angular2: Set placeholder for select, How to show placeholder (empty option) in select control in Angular 2? Add placeholder to select tag in angular2. Let me introduce you to my� 1. Angular 7.0.0 2. Angular CLI 7.0.3 3. TypeScript 3.1.1 4. Node.js 10.3.0 5. NPM 6.1.0 1. Using Reactive Form To set select option selected in reactive form we can use setValue and patchValue of FormGroup. The setValue sets the value in each and every form control of FormGroup.

I'd suggest not sending down the result for ID: 1 as you will not be utilizing it. Component would be something like:

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

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

  category = 0;
  categories = [
    { id: 2, name: "Opel" },
    { id: 3, name: "Mazda" },
    { id: 4, name: "BMW" }
  ];
}

Template:

<select class="form-control border custom-select" [(ngModel)]="category">
    <option selected disabled="disabled" [value]="0">Chose a category...</option>
    <option *ngFor="let cat of categories" [value]="cat.id">{{cat.name}}</option>
</select>

Angular Quick Tip — How to Show a Placeholder in Select Control , But on select I should pass the selected value (object means I should pass name & id 1) <input list="appList" [(value)]="apps.id" [(ngModel)]="currentApp" style ="width:10%;font-size: 5px" placeholder="Application" Thanks & Regards Declare myapp variable in typescript and on change you can get� Angular Quick Tip — How to Show a Placeholder in Select Control. I find it very strange, but two times people have asked the same question in SO and still have not found a satisfactory answer..

How to pass the drop down option value to component using data list?, Create a new file with name "custom-select.component.ts" under the 7. 8. 9. import { Component } from '@angular/core' ;. @Component({ It needs label, placeholder, the selected option key, required (boolean) and Ideally we'll be setting the data using ngModel or formControl/formControlName when� I'm having trouble creating a select in Angular2 that is backed by an array of Objects instead of strings. I knew how to do it in AngularJS using ngOptions, but it doesn't seem to work in Angular2 (I'm using alpha 42).

How to create a custom dropdown using Angular CDK, So after submitting a new OPTION, it is there, but not selected. The reason of this is that Angular uses object identity to select options. So when we get a new data, objects will have different

In this Angular tutorial, I’m going to share with you how to work with Angular 7|8|9 Select Dropdown. We’ll learn to work with Angular select dropdown with Reactive Forms. In this tutorial i will show you how you can create, implement and validate select dropdown in Angular app.

Comments
  • So you would want category id 1 to be the default selected item but you don't want it selectable by the user?
  • Can you please state (1) what you want and (2) what the code is doing or not doing that is different from what you want?
  • no, I have 5 categories from DB. Category with id 1 must not be in the dropdown and I want the selected value to be a MSG setted by me "Choose a category..."
  • @theMayer Stackblitz this is just an output
  • please share component as well with categories , as selected to default option would set "choose category" - stackblitz.com/edit/angular-6pmfod