Ionic: Cómo modificar el CSS de una web en tiempo de ejecución

Cuando ejecutamos una app de Ionic muchas veces necesitamos modificar en tiempo real los estilos de un determinado elemento, hay varias formas de hacerlo de manera directa o indirecta. En este post os voy a explicar como hacerlo utilizando Renderer2 y Angular.

Por una parte en HTML creamos una capa de ejemplo:

<div id="capa">Ejemplo</div>

Por otra parte en el fichero de la página de Typescript tendremos que hacer lo siguiente.

Importamos la librería:

import { Component, ViewChild, OnInit,  Renderer2 } from '@angular/core';

Inyectamos la librería en el constructor:

constructor( private renderer: Renderer2 ) { }

Y por último dentro del método que elijamos accedemos al elemento capa para modificar sus estilos en línea:

const parent: HTMLElement = document.getElementById('capa');

this.renderer.setStyle(parent, 'background', 'green');

Así de sencillo y en tiempo real.

Espero que os sea de utilidad ^_^.