Angular TemplateRef in web component

Question

If we create a webcomponent in Angular, how to consume Input that takes TemplateRef?

For example the following component ist converted to a web component

@component({
selector:"app-lorem",
....
})
export class LoremComponent{

@Input()
ipsum: TemplateRef<any>

....
}

Now in react or in js App its being used as:

...imports here...

<app-lorem> </app-lorem>

<template> Hello world </template>

So the web component is working well but there ist no way to pass template to app-lorem. Moreover i think template can not be assigned to TemplateRef. Any Help here?

Antoniossss · Accepted Answer · 2024-09-18 20:53:05Z

-1

Just pass ref to it as value

<app-lorem [ipsum]="myTemplate"> </app-lorem>

<template #myTemplate> Hello world </template>

edited Sep 18, 2024 at 20:53

answered Sep 18, 2024 at 20:36

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8462556 Over a year ago

your suggestion is for angular environment. element ref with # works only in Angular not in react. moreover template can not passed to TemplateRef

Antoniossss Over a year ago

"Angular TemplateRef in web component",so....

Collectives™ on Stack Overflow

Angular TemplateRef in web component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related