CODEWITHSUNDEEP
angularangular-material
kathikeyan A
kathikeyan A

Reputation: 1877

Placeholder in mat-autoComplete does not work as illustrated in the Angular Material Documentation

I am using the same exact code provided in the angular material documentations. As per the Angular Material Website, the example for angular material's mat-Autocomplete control works as follows

Behaviour as per Angular Material Documentation

But my page the placeholder stays on top and does not work this way

Behaviour in my local

The problem is that the placeholder which is supposed to appear on the input field does not appear and I always see the small place holder above the input field. It does not disappear even when I am editing the input fields.

Am Scratching my head for a while. Can I be provided with tips on what could I be doing wrong possibly

The code that I am using in my local HTML

<form class="example-form">
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Plan" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{ option }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>

Code in my typescript file


    import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
    import { Router } from '@angular/router';
    import { FormControl, Form } from '@angular/forms';
    import { Observable } from 'rxjs/Observable';
    import { map } from 'rxjs/operators';
    import { startWith } from 'rxjs/operators/startWith';
    @Component({
        selector: 'app-my-component',
        templateUrl: './app-my-component.component.html',
        styleUrls: ['./app-my-component.component.scss']
    })
    export class MyComponent implements OnInit, OnChanges {
        myControl: FormControl = new FormControl();
        options = ['One', 'Two', 'Three'];
        filteredOptions: Observable;

        constructor(private router: Router) { }

        filter(val: string): string[] {
            return this.options
                .filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
        }

        ngOnInit() {
            try {
                // temp code
                this.filteredOptions = this.myControl.valueChanges.pipe(
                    startWith(''),
                    map(val => this.filter(val))
                );
                // end of temp code
            } catch (exception) {
                // ....
            }
        }
    }

Upvotes: 2

Views: 3737

Answers (2)

Ankit Kumar Mishra
Ankit Kumar Mishra

Reputation: 1

<mat-autocomplete #auto1="matAutocomplete" [class]="'blue-bg'">
 <mat-option *ngFor="let option of simpleOptions" [value]="option">
  {{ option }}
 </mat-option>
</mat-autocomplete>

Upvotes: 0

kathikeyan A
kathikeyan A

Reputation: 1877

I have employed the following SCSS work around for the time being. This is definitely not a direct solution to the posted problem, but lets me work around it with acceptable behavior.

::ng-deep .mat-form-field-placeholder-wrapper {
    display: none !important;
}

input {
    &::-webkit-input-placeholder {            
        font-size: 14px !important;
        color: #818181 !important;
    }
    &::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 14px !important;
        color: #818181 !important;
    }
    &:-ms-input-placeholder {
        /* IE 10+ */
        font-size: 14px !important;
        color: #818181 !important;
    }
    &:-moz-placeholder {
        /* Firefox 18- */            
        font-size: 14px !important;
        color: #818181 !important;
    }
}

It works as illustrated in the following screen shot - work around

Upvotes: 1

Related Questions