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.