Angular 6 在父组件中显示来自子组件的模板

Question

For an Angular 6 application I want to clean up my code and generalize some parts.

On a detail page in my application is have two main sections a summary and some more detailed stuff. The summary is split up in three mat-cards. And the detailed part is a larger mat-card over the whole width of the page. The summary part is for each type of detail page more or less the same. The detailed page is for each type different.

I want to create an overview component, this component handles all the logic (HTTP-calls, etc.). For the detailed section i want to create a custom component for each type, these components will handle the visualization (different charts, tables, etc.). Till now no big problem.

The problem I stubbled upon is that in one of the detail mat-cards there is custom visualisation specific for each type. So now my question, is it possible to somehow show content from a child component into the parent. I attached an image to clarify my situation.

Answer 1

Take a look at ng-content : https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

In your parent, you would include ng-content blocks with selectors that your child component would place content into.