I want to design an Angular application that implements inheritance and sharing of elements between components. The parent component should have the common UI elements, and the child components should display those elements from the base class while adding their own elements.
In the illustration below, the Parent Component should encapsulate the base layout having Header, Element 1, and Element 2. I want to eliminate duplication of code, so these elements should not be repeated in the HTML markup of the child components.
Child Component A should only compose the Element X but it must appear in between Element 1 and Element 2 of the parent component. Likewise, for Child Component B, only Element Z should be in the HTML markup, but it should appear at the bottom part.
Is this concept of inheritance achievable in Angular? One approach I know to achieve this layout is to simply build a single page (the Parent Component) and show/hide the elements based on some flags. But I'm curious to know whether inheritance can be done for this to segregate components based on their features.