one component with multiple HTML support

Question

I'm trying to breakdown bigger HTML chunks which has repeated markup based on flags.

Is there a way we can make html code split into files one.html, two.html and render them into my component (.ts will decide which html to load )

Basically idea is one component -> multiple html files

I can have single big html like previous and use ng-template/ngContentOutlet but this is still making readability a issue for a 2k+ lines on html.

we're on angular 18.x standalone, any suggestions are golden

It's not possible, you can only have one HTML file per component. You should split your huge component into multiple smaller components instead. — JSON Derulo
– JSON Derulo, Commented Oct 23, 2024 at 14:10
@JSONDerulo earlier we used to have ngInclude which takes path but for performance reasons its depreciated and looks like its a dead end but really good to have one hopefully in future. — super cool
– super cool, Commented Oct 23, 2024 at 14:18

Naren Murali · Accepted Answer · 2024-10-23 14:32:49Z

2

AngularJS ng-include is not exactly but replaced by ng-template/ngContentOutlet of Angular.

You can create a component that is specifically designed to hold reusable ng-templates.

The component will contain all the templates in it's HTML and ViewChild for each of the templates.

reusable.com.ts

@Component({ ... })
export class ReusableTemplatesComponent {
    @ViewChild('test') test!: TemplateRef<any>;
}

reusable.com.html

<ng-template #test let-str="str">
    {{str}} World!
</ng-template>

Then when you want to use these templates, add the component to the bottom and create a reference using template reference, access the template and pass the context.

<ng-container *ngTemplateOutlet="reusableTemplates.yesNoFlagTemplate; 
    context:{str: 'Hello'}"></ng-container>
....
<app-reusable-templates #reusableTemplates/>

answered Oct 23, 2024 at 14:32

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

one component with multiple HTML support

1 Answer 1

reusable.com.ts

reusable.com.html

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

reusable.com.ts

reusable.com.html

Comments

Your Answer

Sign up or log in

Post as a guest

Related