Issue with onDestroy directive when component was invisible

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'unsubscribe')
TypeError: Cannot read properties of undefined (reading 'unsubscribe')
    at CoordinatesDirective.ngOnDestroy (ngx-color.mjs:117:18)

Problem happens in this part:

    ngOnInit() {
        this.sub = this.mousechange
            .pipe(
        // limit times it is updated for the same area
        distinctUntilChanged((p, q) => p.x === q.x && p.y === q.y))
            .subscribe(n => this.handleChange(n.x, n.y, n.$event, n.isTouch));
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
    }

However color component sits under display: none Issue vanished when show all color components.

Stacktrace comes from this piece of code, view tries to destroy all:

 ngOnDestroy() {
        this._stateChanges.complete();
        this._contentViewRef.destroy();
        if (this._headerViewRef) {
            this._headerViewRef.destroy();
        }
    }

Browser debugger shows that ngOnInit was not called.

Proposal is to put destroy under if condition

scttcper / ngx-color

Issue with onDestroy directive when component was invisible #372