Is there a way to have 2 html templates with on angular component?

Question

I need to refactor some code, since my HTML template is getting pretty long. Is there any way you know of, I can reference to 2 templates with one component?

Answer 1

No. It kind of beats the point of working in components. The best approach would be to extract anything re-usable or at least partially independent and make a component out of it.

For example, if it's a wizard like component you'd like to create, create step components.

Look at the example here: older stack overflow question

In traditional angularjs, there was the ng-include component which did what you are asking for but it's not going to be included in angular 2+. Github discussion about it

Answer 2

You can't have multiple templates on single components, and angular isn't supposed to work that way. The thing you can do to achieve the same, is by conditional rendering . Or else you can use the ng-content directive to dynamically insert html to the child component, which will be actually inserted from the parent between the child components.