How to customize Angular material design input field in Angular 5

Question

I am working in an angular 5 application ,Here I am using Angular Material Design for UI .

Now I want to design a input filed as like in the image

I don't know how to add the "Change" label inside he input field .

Stackblitz : https://stackblitz.com/edit/angular-stacb4-5oaagd?file=app%2Fsnack-bar-overview-example.html

app.component.html

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="email" required>
</mat-form-field>

Can anyone help me to solve this .

Aniket Avhad · Accepted Answer · 2018-08-30 09:08:36Z

2

you can use like this,

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input #inp matInput placeholder="email" required>
   <span matSuffix class="lbl" (click)="inp.value = ''">change</span>
</mat-form-field>

and in style.css

.lbl {
   color: #1787dc;
   cursor: pointer;
}

Stackblitz demo

answered Aug 30, 2018 at 9:08

Aniket Avhad

4,1453 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krishna Rathore · Accepted Answer · 2018-08-30 09:03:47Z

2

use matSuffix for this

<mat-form-field class="col-sm-12">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="email" required>
  <button matSuffix (click)="getData()">Change</button>
</mat-form-field>

answered Aug 30, 2018 at 9:03

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

harkesh kumar · Accepted Answer · 2018-08-30 09:09:29Z

1

try This if you need something like this

<mat-form-field class="col-sm-12">
    <mat-label matSuffix >Enter your email</mat-label>
  <a matSuffix > change ? </a>
    <input matInput placeholder="email" required>
</mat-form-field>

answered Aug 30, 2018 at 9:09

harkesh kumar

9032 gold badges14 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to customize Angular material design input field in Angular 5

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related