¿Como aplicar estilos a un elemento de ionic desde su archivo.ts?

publicado por: Anonymous

Muy buenas, les explico, para poder aplicar algún estilo a un elemento que es propio del DOM hago lo siguiente:

Alguna pagina.ts:

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

//Dentro de la clase:
@ViewChild('profilePicture') profilePicture: ElementRef;

//Y para cambiarle algun estilo o propiedad a este elemento hago algo como:
profilePicture.nativeElement.style.color = "#000";

HTML de alguna pagina.ts:

<ion-content>
    <div [ngStyle]="{'background-image': 'url(' + image_data + ')'}" 
            #profilePicture class = "profile_picture">
<ion-content>

Eso funciona por que es un div, (Un elemento propio del DOM)… ¿Y si el elemento al que intento referirme es propio de ionic?, es decir:

<ion-card-content class = "animableCard" #cardContent>
    //Mas elementos
</ion-card-content>

Yo asi accedo al elemento:

@ViewChild('cardContent') cardContent: ElementRef;

pero el problema es que al hacer esto, el elemento ya no tiene una propiedad nativeElement, por lo que no puedo acceder tampoco a la propiedad style del elemento, ¿Y entonces como hago para cambiar un estilo desde la pagina.ts?, requiero hacerlo desde ahi, ya que requiero que una funcion que cambia el estilo de ese elemento se ejecute justo al cargar la pagina.

solución

He encontrado una solucion muy buena!, adjunto la fuente original de la solucion aqui:

https://github.com/Microsoft/TypeScript/issues/16920

En resumen, donde yo quiera aplicar un estilo en alguna funcion, puedo hacer algo como:

let misAnimables = document.getElementsByClassName("animableCard") as HTMLCollectionOf<HTMLElement>;

Y ahora que tengo una coleccion de elementos HTML y no simplemente de elementos, puedo iterar sobre cada uno de ellos para aplicarle un estilo:

setTimeout(()=>{

    for(let i = 0; i < misAnimables.length; i++){

        misAnimables[i].style.bottom = "0px";

    }

},1);
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *