Estoy buscando la forma de aumentar, disminuir, regular el tamaño de letra, así como modificar contraste en todos los componentes de mi proyecto angular, cada función con un botón. No sé cómo aplicarlo en todo el proyecto.
Hice la prueba de una función en un componente y sí funciona, pero lo quiero replicar en todo el proyecto. Ayuda, por favor.
Anexo el código que agregué a un sólo componente de angular:
En el HTML:
<div id="slideout">
<label for="menu-toggle" ngbTooltip="Controles de accesibilidad"><img class="accessibilityimage" src="./assets/accessibility.png" alt="Feedback" /></label>
<input type="checkbox" id="menu-toggle"/>
<div class="icon-bar" id="menu">
<a class="b-1" (click)="increase()">Letra grande</a>
<a class="b-1" (click)="decrease()">Letra pequeña</a>
<a class="b-1" (click)="reset()">Letra regular</a>
<a href="#" target="_blank" class="b-1">Alto contraste</a>
<a href="#" class="b-2">Contraste regular</a>
</div>
</div>
Y en cada etiqueta de texto (h,p) coloqué:
<h3 [style.fontSize.px]="fontSize" class="card-title">Texto prueba</h3>
En el .ts coloqué:
const DEFAULT_FONT_SIZE = 15;
export class CardsEntidadesComponent implements OnInit {
fontSize: number;
constructor(){
this.fontSize = DEFAULT_FONT_SIZE;
}
decrease(){
this.fontSize = (this.fontSize * 0.8);
}
increase(){
this.fontSize = (this.fontSize * 1.2);
}
reset(){
this.fontSize = DEFAULT_FONT_SIZE;
}
}
Les agradezco su ayuda. Saludos