Very good, I explain, in order to apply some style to an element that is typical of the DOM, I do the following:
Some page.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 of some page.ts:
<ion-content>
<div [ngStyle]="{'background-image': 'url(' + image_data + ')'}"
#profilePicture class = "profile_picture">
<ion-content>
That works because it's a div, (A DOM element)... What if the element I'm trying to refer to is ionic's own? That is:
<ion-card-content class = "animableCard" #cardContent>
//Mas elementos
</ion-card-content>
This is how I access the element:
@ViewChild('cardContent') cardContent: ElementRef;
but the problem is that by doing this, the element no longer has a nativeElement property, so I can't access the element's style property either, so how do I change a style from page.ts? I need to do it from there, as I require a function that changes the style of that element to be executed right on page load.
I have found a very good solution!, I am attaching the original source of the solution here:
https://github.com/Microsoft/TypeScript/issues/16920
In short, where I want to apply a style to some function, I can do something like:
And now that I have a collection of HTML elements and not just elements , I can iterate over each one to style it: