Wie wird das Symbol im Platzhalter in eckiges Material eingefügt?

Question

Ich versuche, Symbol im Platzhalter zu setzen. Ich habe versucht, diesen Code:

<md-input name="name"> 
    <md-placeholder> 
     <i class="material-icons app-input-icon">face</i> Name 
    </md-placeholder> 
</md-input> 

Es funktionierte (wurde Symbol mit Platzhalter angezeigt), bevor ich Winkelmaterial und aktualisiert, um die Winkel cli neu installiert. Für diesen Code-Browser gibt es jetzt diesen Fehler: "'md-input' ist kein bekanntes Element".

dann habe ich versucht, diesen Code:

<md-input-container> 
    <input mdInput placeholder="Name" name="name2"> 
</md-input-container> 

Es ist richtig funktioniert aber wie kann ich ‚Gesicht‘ Symbol in seiner Platzhalter setzen?

Answer 1

Ihr Problem war nicht das MD-Platzhalter-Tag. Genau wie der Fehler sagte, war es md-input, das veraltet war. Angular Material hat kürzlich sein md-input-Tag in eine mdInput-Direktive geändert.

Aber der MD-Platzhalter funktioniert immer noch (nicht sicher, ob es aber dauern wird).

Der folgende Code sollte dann funktionieren:

<md-input-container> 
    <md-placeholder> 
     <md-icon>face</md-icon> Name 
    </md-placeholder> 
    <input mdInput name="name"> 
</md-input-container> 

Eine Alternative ist es, die mdPrefix oder mdSuffix Richtlinien zu Ihrem md-Symbol-Tag zu verwenden. Dadurch wird das Symbol links oder rechts neben Ihrer Eingabe angezeigt. Es folgt jedoch nicht dem Platzhalter, wenn Sie darauf klicken.

Beispiel:

<md-input-container> 
    <md-icon mdPrefix>face</md-icon> 
    <input mdInput placeholder="Name" name="name"> 
</md-input-container> 

Check the API reference for more informations.

Answer 2

mat-Suffix hat für mich auch nicht. Schritt hält mit ihrem docs ist immer eine lästige Pflicht, sondern als von 5.1.1 sollte diese Arbeit:

<mat-form-field class="example-form-field"> 
    <input matInput type="text" placeholder="Clearable input" [(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> 

Quelle: "Input mit einem klaren Button" Beispiel hier: https://material.angular.io/components/input/examples