On select Font-family change for text in Angular

For that first we need create component.

import { Component, OnInit } from '@angular/core';
import { fadeInAnimation } from '../../animations/fadein';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  animations: [fadeInAnimation],
  host: { '[@fadeInAnimation]': '' },
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public fontfamilys:any;
  defaultfont:string;
  constructor() { }

  ngOnInit() {

    this.defaultfont = "Arial";

    this.fontfamilys = [];
    this.fontfamilys.push({'title':'Georgia','value':'Georgia, serif'});
    this.fontfamilys.push({'title':'Times New Roman','value':'Times New Roman'});
    this.fontfamilys.push({'title':'Palatino Linotype','value':'Palatino Linotype'});
    this.fontfamilys.push({'title':'Arial','value':'Palatino Linotype'});
  }


  onChange(fon){

    this.defaultfont = fon;

  }

}

First we need create first array for the font-family. In html we need to add create drop-down to choose font-family.

<div>
<p [style.font-family]="defaultfont">
 test works!test works!test works!<br/>
 Aftern Form submit you can get value
 Aftern Form submit you can get value<br/>
 Aftern Form submit you can get value
</p>
<select [ngModel]="defaultfont" (ngModelChange)="onChange($event)">
 <option value=''>Select</option>
 <option *ngFor="let p of fontfamilys" value="{{p.value}}">{{p.title}}</option>
</select>
<h1></h1>
</div>

In select we have need to create onchange function for the selecting font. We have create function in component file capture the selected value and set in text as font-family.