CODEWITHSUNDEEP
javascriptangularfonts
Mellville
Mellville

Reputation: 1097

Changing font family (of an input) with select in Angular 4?

I want to change the font of this input text by selecting the font family, but as it is it's not working...I've tried several triggers, but none of them worked. What I have so far:

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>

TypeScript

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

Upvotes: 0

Views: 1624

Answers (1)

Gergő Kajt&#225;r
Gergő Kajt&#225;r

Reputation: 492

Use change for bind the element like this: 

<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>

And in your component ts set the selectedFont variable public and you can use like this: 

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

Upvotes: 2

Related Questions