My implementation involves using virtual scrolling from the cdk within a trigger-opening sidenav on a mat-radio element. Here is the code snippet:
ts -
...
@Component({
selector: 'app-generic-options-list',
templateUrl: './generic-options-list.component.html',
styleUrls: ['./generic-options-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GenericOptionsListComponent implements OnInit, OnChanges {
@Input() options: MultiSelectOption[];
_options: MultiSelectOption[];
...
ngOnInit(): void {
this.refreshOptions();
}
private refreshOptions() {
this._options = this.options;
...
}
template -
<cdk-virtual-scroll-viewport itemSize="30" class="scroll-viewport" *ngIf="type === 'single'">
<mat-radio-group >
<mat-radio-button
*ngFor="let option of selected"
[value]="option"
[checked]="true"
(click)="onRadioOptionClick(option)">
{{option.val}}
</mat-radio-button>
<mat-radio-button
*cdkVirtualFor="let option of _options"
[value]="option"
[checked]="false"
(click)="onRadioOptionClick(option)"
class="scroll-item"
>
{{option.val}}
</mat-radio-button>
</mat-radio-group>
</cdk-virtual-scroll-viewport>
and includes appropriate CSS styling.
Whenever the above component disappears from the parent component for a known reason but doesn't activate the onDestroy method, I encounter an error causing the sidenav to get stuck and other unexpected behaviors. Despite attempting to use onPush as a solution, it did not resolve the issue. What would be the correct approach to fix this problem?