How To Use ng-template from selector A in selector B Angular

Question

I have a component with selector app-popup and app-table. For example: if I want to use this component selector, it's will looks like this code below:

<app-popup>
    <app-table></app-table>
</app-popup>

In my app-popup I can use ng-template with selector #modalFooter to pass some button in there, it's will looks like this code below:

<app-popup>
    <app-tree></app-tree>

    <!-- my popup ng-template custom button -->
    <ng-template #modalFooter let-activeModal>
        <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
    </ng-template>
</app-popup>

In my app-table I have ng-template also, with selector #tableFooter to pass some content in there, so It's will looks like this code below:

<app-popup>
    <app-tree>
        <ng-template #tableFooter>
           <button class="btn btn-primary">Table Button</button>
        </ng-template>
    </app-tree>

    <!-- my popup ng-template custom button -->
    <ng-template #modalFooter let-activeModal>
        <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
    </ng-template>
</app-popup>

My Question is how to use ng-template with selector #modalFooter in ng-template with selector #tableFooter? Because I've been try this code below:

<app-popup>
    <app-tree>
        <ng-template #tableFooter>
            <!-- my popup ng-template custom button -->
            <ng-template #modalFooter let-activeModal>
                <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
            </ng-template>
        </ng-template>
    </app-tree>
</app-popup>

But that code above it's now working, button cancel not showing in app-table.

Thanks in advance.

Answer 1

You can either create a tableFooterComponent

   @Component({
      selector: 'footer',
      template: `
         <button class="btn btn-primary">Table Button</button>
          <ng-content></ng-content>
      `,
    })
    export class tableFooterComponent {    
    }

And then in html you can use it like this

<app-popup>
    <app-tree>
        <app-footer>
            <!-- my popup ng-template custom button -->
            <ng-template #modalFooter let-activeModal>
                <button class="btn btn-primary" (click)="activeModal.close(true)">Cancel</button>
            </ng-template>
        </app-footer>
    </app-tree>
</app-popup>

or in <app-tree> create multiple Content Projection with multiple selectors

       @Component({
          selector: 'app-tree',
          template: `
             <ng-content select="[tableFooter]"> </ng-content>
            <ng-content select="[modalFooter]"></ng-content>
          `,
        })
        export class treeComponent {    
        }

and in html

  <app-popup>
        <app-tree>
         <div tableFooter>
           <!--tableFooter content here -->
          <div modalFooter>  <!--modalFooter content here --> </div> 
         </div>
        </app-tree>
  </app-popup>

To go further you can take a look at this link