bottom sheet lazy init

[vytautas-pranskunas-]

is there any way to load init component inside of bottom sheet on open?

[waterplea]

I'm not sure what you mean, content does load it only on open. What do you mean by init component?

[waterplea]

I still do not understand. Could you make a stackblitz with console.log that you expect to be called on each toggle?

[vytautas-pranskunas-]

basically what i am looking for:

	<ng-template
    [tuiSheetDialog]="open"
    [tuiSheetDialogOptions]="{stops: ['29rem'], offset: offset}"
    (tuiSheetDialogChange)="toggle($event)"
> 
CONTENT
...

so all the CONTENT is available upon route load NOT UPON SHEET OPEN. Lazy load would mean that all the content would be loaded ONLY upon sheet open.

is does more clear?
I cannot do a stackblitz for this :)

[waterplea]

No, content is only created when you open the sheet, it's inside a template and template is inert/non-existent until it's instantiated. If you put a component there — it's ngOnInit will be triggered every time you open a sheet, since it will be recreated every time. If you want to lazy load the actual code in there — you can use dynamic imports and PolymorpheusComponent, something like:

private readonly component = defer(() => import('...')).pipe(shareReplay());

onOpen() {
  this.component.pipe(
    switchMap(component => this.sheets.open(new PolymorpheusComponent(component)),
 ).subscribe();
}

Keep in mind this is pseudo code, you might need to use component.default or something, but it's a rough idea of how to lazy load the code of the component inside the sheet.

[waterplea]

Looking at your code from other question, I see you use content projection like this:

<ng-template [(tuiSheetDialog)]="isOpened()">
  ...
  <ng-content select="[footer]"/>
</ng-template>

That's your problem. Content in Angular is initiated immediately always and is just kept detached from DOM until it's projected. If you want it to be lazy, you would have to switch to templates. There's nothing we can do from our side.