Angular 8 如何添加/删除 CSS class 延迟

Question

I have an angular component with following snippet in template

`<div class="articleContainer">
    <div class="mrFaqArticle {{listParent}} active">
        <ul class="choice">
            <li *ngFor="let intent of intents">
                <div class="bal">
                    <a class="label"(click)="selectIntent(intent)">{{intent.title}}</a>
                </div>
            </li>
        </ul>
    </div>
</div>`

And following method in the component which does simple animation using css classes

`animateIntentList() {
    document.querySelector(".mrFaqArticle").classList.remove("fadeIn", "fadeOut");
    document.querySelector(".mrFaqArticle.active").classList.add("fadeOut");
    document.querySelector(".mrFaqArticle.active").classList.remove('active');

    setTimeout(()=>{
        document.querySelector(`.mrFaqArticle.${this.listParent} .choice`).classList.add('stagger');
        document.querySelector(`.mrFaqArticle.${this.listParent}`).classList.add('active', 'fadeIn');
    },320);
}`

Is there a way to implement the above using directive, as accessing DOM element by query selector is considered bad practice.

Answer 1

Did you consider to use ngClass or ngStyle?