Quiero colocar un boton en el html que cuando de clic aumente 2px el valor del fontsize y otro boton que al dar clic disminuya dos pixeles el valor del fontsize.
actualmente tengo el codigo asi pero solo me lo cambia a los que tengan el id #para, pero necesito que se cambie para todo el sitio.
export class HeaderComponent implements OnInit {
fontSize = 14;
@ViewChild('para', {static: true}) para: ElementRef;
changeFont(operator){
operator === '+' ? this.fontSize++ : this.fontSize--;
(this.para.nativeElement as HTMLElement).style.fontSize = `${this.fontSize}px`;
}
el html lo tengo asi:
<div (click)="changeFont('+')" class="font-control" id="font-up">A<sup>+</sup></div>
<div (click)="changeFont('-')" class="font-control" id="font-down">A<sup>-</sup></div>
Como podria hacer que cuando den clic aumente o disminuya a todos los componentes