Collapse doesn't take account of element's height

[rob-myers]

Consider the following example, where initially collapsed = msgShown = false:

<div [collapse]="collapsed">
    <div *ngIf="msgShown">
        Message text
    </div>
    <div>
        Main text
    </div>
</div>

Setting msgShown = true appears to replace "Main text" by "Message text", rather than showing them both. This is because the height of the outermost div is not updated, effectively hiding "Main text".

Cheers.

[likerRr]

Confirmed, faced with the same issue when played with nested collapsible components. Once nested collapse is open, parent collapse doesnt recalculate own height which causes partial hiding of nested collapse's content.

Please, take into account this case too. Thx!

[rob-myers]

For anyone else faced with this issue, one can alter collapse.component.ts by uncommenting:

@HostBinding('style.height')
  private height:string;

and also:

this.height = 'auto';

in the public method "show".

Edit Additionally, change the two timeouts milliseconds from 4 to 50.

[likerRr]

@valorkin Any updates here? Solution provided by @rob-myers doesn't work in my case. Host's height doesn't recalculate if child's content height was increased dynamically (e.g. some elements was added to list)