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