CODEWITHSUNDEEP
angularangular-material
HLourenssen
HLourenssen

Reputation: 79

Angular Material: input clear button icon lay-out fails

I'm trying to make this example work in my first angular app: https://material.angular.io/components/input/examples input field with clear button.

I have the following code in my template.html:

<mat-form-field>
        <input matInput type="text" placeholder="Wens" [(ngModel)]="value">
        <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>

and i imported the following modules:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { MatTabsModule } from '@angular/material/tabs';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatCheckboxModule } from '@angular/material';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatIconModule } from '@angular/material/icon';
    import { MatGridListModule } from '@angular/material/grid-list';
    import { MatSlideToggleModule} from '@angular/material/slide-toggle';
    import { MatInputModule } from '@angular/material/input';
    import { MatMomentDateModule } from '@angular/material-moment-adapter';
    import { MatDatepickerModule } from '@angular/material/datepicker';
    import { MatFormFieldModule } from '@angular/material/form-field';

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatTabsModule,
    MatCheckboxModule,
    MatToolbarModule,
    MatIconModule,
    MatGridListModule,
    MatSlideToggleModule,
    MatInputModule,
    MatDatepickerModule,
    MatMomentDateModule

But the close icon looks not how it supposed to be: Angular Material Clear Input Button with wrong lay-out

What am i doing wrong? Other form fields i used work fine.

Upvotes: 2

Views: 14700

Answers (1)

HLourenssen
HLourenssen

Reputation: 79

I found the answer: I need to add import { MatButtonModule } from '@angular/material/button'; to make the button work correctly.

Upvotes: 3

Related Questions