I have header.component and if i click Small, medium, large button font size resize globally(all application components). here is my link https://stackblitz.com/edit/angular-yrmgdt
Attached my UI screenshot for your refenter image description here
A possible solution is to create a DocumentService that will set the font-size attribute of the documents <html> element (see stackblitz below). You could then size your elements in rem to scale based on the <html> elements font-size.
import { Injectable, Optional, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable()
export class DocumentService {
constructor(@Inject(DOCUMENT) private document) { }
setCss(element, attribute, value) {
this.document.querySelector(element).style[attribute] = value;
}
}
export class HeaderComponent implements OnInit {
@Input() sidenav: MatSidenav;
constructor(private documentService: DocumentService) {}
ngOnInit() {}
toggle(size) {
this.documentService.setCss('body', 'font-size', size);
}
}