0

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.

4
  • Nota: usar algo como this.cardContent.el funciona para acceder al elemento en si, pero a la hora de compilar da errores, por lo que no creo que sea buena idea hacerlo, ya que sirve en el serve, pero no servira en el APK.
    – Layer
    Commented el 1 ago. 2019 a las 8:01
  • Lo normal es que cada componente se encargue de sus propios estilos, pero si es un cambio general puedes añadir el CSS al fichero styles.css del proyecto Commented el 1 ago. 2019 a las 10:11
  • El problema es que el css que debo aplicar es una trancision, por lo tanto el estado inicial del css no puede ser igual al estado final, si yo aplico un css desde el inicio, debe ser el css del estado final, para que al momento de ya cargarme la pagina por ejemplo, yo aplique otro css para que haga la trancision el elemento de estado final a inicial.
    – Layer
    Commented el 1 ago. 2019 a las 10:22
  • ah, lo otro es que no, no es un cambio global, muchas gracias pablo ;3
    – Layer
    Commented el 1 ago. 2019 a las 10:37

1 respuesta 1

1

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);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.