onLoad hook

[bori87]

how to notify component that element is loaded?

[tomastrajan]

Can you please elaborate a bit more about the use case? The *axLazyElement directive enables us to use standard Angular template bindings, and also things like @ViewChild so why would we want to know that ? Stuff should just work as any other standard Angular component in the template ?

[BossOz]

hello @tomastrajan,

so, if I need the instance of the lazy-component I need just that?

<ax-lazy-element #dynComponent 
                 *axLazyElementDynamic="this.componentSelector, url: this.componentJsLocation">
</ax-lazy-element>

With the ViewChild

@ViewChild("dynComponent", { static: false }) componentIstance;

[tomastrajan]

Hi @BossOz ! It all depends on the use case. Could you describe what are you trying to achieve?

Your current snippet uses dynamic element which will then change once loaded ao I dont know what would happen at that case as I did not try that yet.

For <some-element #myRef *axLazyDirective> it should work, you might need { read: ElementRef } as its not a component.

[BossOz]

I need something like this because I need to initialize my elements using a standard methods.

For example:
componentIstance.intializeValue(objParams, settings);

[tomastrajan]

@BossOz so your element is not an Angular element but standard web component ? Cuz this library focuses on that other use case to make it possible to <some-element #myRef *axLazyDirective [initialValue]="initialValue"> which was usually not the case and everything had to be done imperatively...

In your case, even if @ViewChild() worked you still would NOT know when it was actually populated... I think adding optional event for loaded would not be too bad and will look into how to add it.

[BossOz]

@tomastrajan hello dude!
Any news on that?

[tomastrajan]

Hi @BossOz !

This is now available! Check out API docs (search for "afterLoad")

[omanzelli]

Hi @tomastrajan,

Is there a way to use this hook inline like so?
<some-element *axLazyElement="url; module: true; loadingTemplate: loading; afterLoadHook: elementLoaded">