I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller:
@Component({
selector: 'show-hide-table',
template: '
<table>
<thead>
<tr>
<th (click)="toggleHidden()">
<div>Show/Hide</div>
</th>
<th [ngClass]="{\'hidden\':isHidden}">
<div>Div is Shown</div>
</th>
</tr>
</thead>
</table>',
styleUrls: ['show-hide-table.component.css']
})
export class ShowHideTable implements OnInit, OnChanges, DoCheck {
public isHidden: boolean = false;
public toggleHidden() {
this.isHidden = !this.isHidden;
this.log.debug('Hidden', this.isHidden);
}
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
this.log.debug('Grid Changes');
}
ngDoCheck() {
this.log.debug('Grid Check');
}
}
'hidden' is a css class with display: none. Initially setting isHidden to true hides the header, and setting it to false shows it, indicating that the class is functioning. While I have simplified the example for clarity, this accurately represents my code. Upon clicking the header, the log displays the toggling of the isHidden variable, but the hidden class does not change accordingly. Additionally, neither ngOnChanges nor ngDoCheck are triggered when the clickable header is clicked.