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

2
votes

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) {
                // ....
            }
        }
    }
2
angularangular-material
Have you added material theme in your style.css? – Vikas
This image illustrates the instance when you have a value in it. How does it appear when it has no input value? – Prachi
The documentation does not seem to speak about that with respect to this example. I am not sure about the material theme, but I did include the material module and auto complete/type a head stuffs are working fine but not this place holder??? – kathikeyan A
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; add this to your style.css and see whether it works or not – Vikas
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(which is actually a label put by the angular material). Neither does it disappear when I am editing the input fields. – kathikeyan A

2 Answers

1
votes

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

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