Angular/Material MatGridList. How can I know that my component go away from page or resized, or disapeared (not removed).

[Ivan Ukraine]

Hi all

I have small problem

<mat-grid-list

style="overflow:hidden"

cols="{{numberOfColumns}}"

rowHeight="{{rowHeight}}px">

<mat-grid-tile

[colspan]="card.cols"

[rowspan]="card.rows"

<app-drag-card

</app-drag-card>

</mat-grid-tile>

</mat-grid-list>

Here when I change colspan and rowspan all works. Size changed.

But I can`t find event which tell me:

'Component resized, you can start your animation and make it look nice'

How I can find this event?

Now I just make delay and it works. But it is like hardcoded.

Can someone give me link for angular events like:

-component resized

-component changed position

-component whatever

if you have idea how to animate this process tell me:)

I see only ngOnInit, ngOnChange (for input changes)

How I can detect if component moved away from page?

Or I should do it with sass?

Thanks for any advice

Ivan

[Sander Elias]

Hi Ivan,

Take a look at the event handling portion of the docs. it explains how you can bind to events. you might want to check out @HostBindings too.

Regards

Sander