Split component HTML in Angular 2+?

Question

I have an Angular 5 app with lot of complex forms and layouts. I would like to split the component HTML into several files and use a single tag to represent them. Is it possible to create a directive to replace a tag with a file's contents?

Is there a better way of handling long HTML files with templates for loading, loaded and error states?

Imagine a feed.component.html has different templates for different types of feed items (images / links / videos / text / etc.) governed by an ngIf. What is the ideal way of maintaining this file?

Answer 1

Angular best practice talks about one html (and one ts file) per component.

If your html in very long and becomes unreadable, probably your logic has the potencial to become too heavy as well.

I would consider dividing the component into sub-components, e.g.:

feed
  ├─ feed.component.html
  ├─ feed.component.scss
  ├─ feed.component.spec.ts
  ├─ feed.component.ts
  └ feeds
     ├─ image
     │   ├─ image.component.html
     │   :
     │   :
     ├─ link
     │   ├─ link.component.html
     │   :
     │   :