Wrong query detecting after reinitialisation in Angular App

[marvinhuebner]

I'm trying to implement css element queries in one of our Angular Apps.

Some element are not initially rendered, so i reinit ElementQueries after a <slide-in> component or <modal> is rendered.

This works in some way but not correct. At the first time the element queries are working correct, but if i close the slide in element and reopen it, there are only two element queries detected and not the fully list.

First:

Second:

Here is a short video example: https://streamable.com/z518j

My angular code looks like this:

I initialise ElementQueries after the app is loaded. And then I listen to simple changes, for example the slide-in opening, and reinit element queries to pass the new rendered html markup.

import {Component, OnChanges, Input, ElementRef, AfterViewInit, SimpleChanges} from '@angular/core';
import {ResizeSensor, ElementQueries} from 'css-element-queries';

@Component({
    selector: 'designer-element-queries',
    template: ''
})

export class ElementQueriesComponent implements OnChanges, AfterViewInit {
    @Input('active')active:boolean;

    constructor(
        private element:ElementRef
    ) {
    }

    ngAfterViewInit() {
        ElementQueries.init();
    }

    ngOnChanges(changes: SimpleChanges) {
        ElementQueries.init();
    }
}

Maybe someone can give me a hint why this is causing?

[marcj]

Is this just hidden (using visibility or display css property) or is the DOM detached and re-attached of the watched element when you toggle the visibility?

[marvinhuebner]

The DOM is detached and attached.

[marcj]

Should be fixed, will be part of the next version 1.0.0 in the next hours.