Ändern der Schriftfamilie (einer Eingabe) mit Auswahl in Angular 4?

Question

Ich möchte die Schriftart dieses Eingabetextes ändern, indem ich die Schriftfamilie auswähle, aber so wie es ist, funktioniert es nicht ... Ich habe mehrere Auslöser ausprobiert, aber keiner von ihnen hat funktioniert. Was ich habe, so weit:

HTML

<mat-form-field id="input-font" (click)="changeFont (this);"> 
     <mat-select placeholder="Font"> 
      <mat-option value="Times New Roman" selected ="selected">Times 

       </mat-option> 
       <mat-option value="Arial">Arial   
       </mat-option> 
       <mat-option value="Roboto">Roboto   
       </mat-option> 


     </mat-select> 
     </mat-form-field> 

<form novalidate #f="ngForm" (submit)="onSubmit(f);"> 
     <mat-form-field> 
      <input matInput placeholder="Name" 
     id="output-text" 
      name="name" 
      [ngStyle]="{'color':'red', 'font-size':'17px'}" 
      [(ngModel)]="user.name" 
      #userName="ngModel" 
      placeholder="Name" 
      minlength="2" 
      required> 
     </mat-form-field> 

Typoskript

changeFont(font){ 
    document.getElementById("output-text").style.fontFamily = font.value; 
    } 

Answer 1

Verwenden change für binden das Element wie folgt aus:

<mat-select placeholder="Font" [(ngModel)]="selectedFont" (change)="changeFont()"> 
     <mat-option value="Times New Roman" selected ="selected">Times 
       </mat-option> 
       <mat-option value="Arial">Arial   
       </mat-option> 
       <mat-option value="Roboto">Roboto   
       </mat-option> 
    </mat-select> 

Und in Ihrer Komponente ts stellen Sie die selectedFont Variable Öffentlichkeit und Sie können wie folgt verwenden:

changeFont(){ 
    document.getElementById("output-text").style.fontFamily = this.selectedFont; 
}