Angular Mat tab does not show another component HTML view

Question

I have used Mat Tab component to show a view of another component (which is currently a raised mat Hello button).. Earlier, there was an issue of tabs not showing full view during when the hello was shown in a tiny scroll along with Content 1.. when I resolved the full view problem using dynamic height, all other content is showing up except the component reference HTML element..

<mat-tab-group dynamicHeight="True">
        <mat-tab label="L1">
           <div>bda></div>
           <app-project-form></app-project-form>
           <div>bda></div> 
           <div>bda></div>             
    </mat-tab>
    <mat-tab label="L2"></mat-tab>
    <mat-tab label="L3"></mat-tab>

</mat-tab-group>

What's actually shown:

Expected output should show the Hello button after the first bda>, instead it is ignored.. Please help in resolving this...