ngClass не работает с пользовательским селектором и расширенным компонентом

Question

У меня есть несколько блоков slideUp / Down на моей странице. Это означает, что когда пользователь нажимает на заголовок блока, его содержимое появляется и исчезает. Но содержание отличается на каждом блоке. Чтобы не дублировать код, я создал основной компонент c:

import {Component, OnInit} from '@angular/core';
import { HostListener } from "@angular/core";

@Component({})
export class AsideComponent implements OnInit {

    class = 'open';
    contentVisible = true;

    scrHeight:any;
    scrWidth:any;

    @HostListener('window:resize', ['$event'])
    getScreenSize(event?) {
        this.scrHeight = window.innerHeight;
        this.scrWidth = window.innerWidth;
    }

    ngOnInit() {}

    constructor() {
        this.getScreenSize();
        if(this.scrWidth < 576) {
            this.hideContent()
        }
    }

    showContent() {
        this.contentVisible = true;
        this.class = 'open';
    }

    hideContent() {
        this.contentVisible = false;
        this.class = '';
    }

    toggleVisible() {
        if (this.contentVisible) {
            this.hideContent()
        } else {
            this.showContent()
        }
    }
}

И реальные блоки расширяют его следующим образом:

import {Component} from '@angular/core';
import {AsideComponent} from "../aside/aside.component";

@Component({
    selector: '[appAsideTools]',
    templateUrl: './aside-tools.component.html',
})
export class AsideToolsComponent extends AsideComponent {}

И я включаю asideTool, например:

<div class="aside-itm" [ngClass]="class" appAsideTools></div>

Конечно, внутри компонента appAsideTools также есть html:

<div class="aside-title" (click)="toggleVisible()">
    <span>title</span>
    <i class="arr-dn-ic"></i>
</div>

<div class="aside-toggle-box" [slide-down]="contentVisible">
    <nav class="aside-nav">
        <ul>
            <li><a href="#"><i class="arr-r">></i> 1</a></li>
            <li><a href="#"><i class="arr-r">></i> 2</a></li>
            <li><a href="#"><i class="arr-r">></i> 3</a>
            </li>
        </ul>
    </nav>
</div>

Все работает. Содержание появляется и исчезает. Но ngClass здесь не работает:

<div class="aside-itm" [ngClass]="class" appAsideTools></div>

До того, как я использовал обычно:

<app-aside-tools class="aside-itm" [ngClass]="class"></app-aside-tools>

И это сработало ...

Angular версия 8.3.23

Answer 1

@Component({})
export class AsideComponent implements OnInit {
  @HostBinding('class.open')
  get isOpen {
    return this.open;
  }
}

И удалить [ngClass] также