Inserting ng-template into child component not rendering the passed in template

Question

I have parent component called auth. In this component I have an ng-template that is a form which represents the login/signup form like this:

`<ng-template #authForm>
    <form [formGroup]="authForm" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <input matInput placeholder="Username" formControlName="userName" >
        <mat-error *ngIf="postForm.get('userName').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="E-mail" formControlName="email" >
        <mat-error *ngIf="postForm.get('email').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Password" formControlName="password" type="password">
        <mat-error *ngIf="postForm.get('password').invalid">You must enter a value</mat-error>
      </mat-form-field>
    </form>
  </ng-template>`

In the same parent component, I am using angular material mat-tab-group component to display either the login component or the sign up component:

`<mat-tab-group (selectedTabChange)="onSignup($event)">
    <mat-tab label="Login">
        <ng-container *ngIf="!isSignup">
            <app-login [loginForm]="authForm"></app-login>  
          </ng-container>
    </mat-tab>
    <mat-tab label="Sign Up"> 
        <ng-container *ngIf="isSignup">
            <app-signup></app-signup>
          </ng-container>
    </mat-tab>
</mat-tab-group>`

On the child component, for example the LoginComponent. I have an @Input() loginForm: TemplateRef<any>. Whenever I try to render the passed in template nothing is displayed and I have no idea why this is not working:

`<ng-container 
  *ngTemplateOutlet="loginForm">
</ng-container>`

Answer 1

The problem is you have two authForm variable names. Change ng-template name to some other name like below. working sample Stackblitz

<ng-template #authFormTemplate>
    <form [formGroup]="authForm" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <input matInput placeholder="Username" formControlName="userName" >
        <mat-error *ngIf="postForm.get('userName').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="E-mail" formControlName="email" >
        <mat-error *ngIf="postForm.get('email').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Password" formControlName="password" type="password">
        <mat-error *ngIf="postForm.get('password').invalid">You must enter a value</mat-error>
      </mat-form-field>
    </form>
  </ng-template>

<mat-tab-group (selectedTabChange)="onSignup($event)">
    <mat-tab label="Login">
        <ng-container *ngIf="!isSignup">
            <app-login [loginForm]="authFormTemplate"></app-login>  
          </ng-container>
    </mat-tab>
    <mat-tab label="Sign Up"> 
        <ng-container *ngIf="isSignup">

          </ng-container>
    </mat-tab>
</mat-tab-group>