mardi 31 octobre 2017

Update the css of an element inside a child component - Ionic

So I am trying to show/hide a button that is inside a child component of a parent component. I am using ngStyle to alter the css of the child component itself, which works, but I can't seem to have the internal css update at the same time. I am using the (click) mechanic with [ngStyle] in the parent class, and that works for the child component itself, but not an internal element inside the child.

My parent code:

<child-component [sensor]="sensor" id="" (click)="onClick(sensor);" [ngStyle]="{'box-shadow': sensor.clickBorder}"></child-component>

with onClick() doing:

if(sensor.clickBorder == '0 0 0px 3px #4DB2EE'){
  sensor.clickBorder = '0 0 0px 1px #c2c2c2';
  sensor.buttonDisplay = 'none';
} else {
  sensor.clickBorder = '0 0 0px 3px #4DB2EE';
  sensor.buttonDisplay = 'inline-block';
}

and internally in the child component:

<button ion-button icon-only [ngStyle]="{'display': this.buttonDisplay}" id='sideButton'>

where both variables are declared in the class like:

clickBorder: string = '0 0 0px 1px #c2c2c2';
buttonDisplay: string = 'none';

This may look confusing but specifically I want to know how to style an internal element of a child class from a parent class, and have that internal element update.




Aucun commentaire:

Enregistrer un commentaire