CODEWITHSUNDEEP
htmlcssangular
dorcsi
dorcsi

Reputation: 325

Angular Input Placeholder on the top

I am new in Angular and I have to create an input field like that:

enter image description here

Everything is ok besides the Vorname placeholder on the top. How can I put it there?

I am using Angular Materials.

<div class='grid-container-left'>
        <mat-form-field appearance="outline">
            <input matInput placeholder={{angeforderteVerfueger.request.vorname}} readonly>
        </mat-form-field>
    </div>

Thank you in advance!

Answer:

The below provided solutions works, just have to add floatLabel value with always.

<mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Vorname</mat-label>
            <input matInput [placeholder]="angeforderteVerfueger.request.vorname" readonly>
        </mat-form-field>

Upvotes: 0

Views: 1488

Answers (2)

jesvin palatty
jesvin palatty

Reputation: 373

What you are doing is binding a property using string interpolation which is the wrong syntax. Try this

    <div class='grid-container-left'>
                <mat-form-field appearance="outline">
                    <mat-label>Vorname</mat-label>
                    <input matInput [placeholder]="angeforderteVerfueger.request.vorname" readonly>
                </mat-form-field>
            </div>

Upvotes: 1

Mohamed Ayadi
Mohamed Ayadi

Reputation: 105

Try to add a label before your input:

<mat-label>Vorname</mat-label>

Upvotes: 1

Related Questions