0

I would like to reuse this ng-template elsewhere in my app. Only the ng-template, not the tab group. I still want to be able to change the message though between the different components.

This is my code

<mat-tab-group>
    <ng-template #reusable>
        <h2 matDialogTitle>Are you sure you want to do X</h2>
        <mat-dialog-actions>
            <button mat-button matDialogClose="no">No</button>
            <button mat-button matDialogClose="yes">Yes</button>
        </mat-dialog-actions>
    </ng-template>
</mat-tab-group>
skydev
  • 1,867
  • 9
  • 37
  • 71
  • 1
    Reuse would work if you create a separate component. – Hardik Patel Sep 17 '18 at 08:43
  • Possible duplicate of [Angular reusable template](https://stackoverflow.com/questions/46072594/angular-reusable-template) – Shashikant Devani Sep 17 '18 at 08:50
  • 1
    For you to be able to reuse something you need to create a new component. One of the best practices in Angular is . If your component starts to be bigger you should consider to move some of the code to another component. Also if you have something like a button or that code your showing and you know you will want to reuse in other places of your app you should create a new component as well. – Tiago Neiva Sep 17 '18 at 08:50
  • Ok thanks for this, let me try it – skydev Sep 17 '18 at 08:54
  • And also use allways the CLI to create your components , services , etc.. At long term this keeps your code cleaner and maintainable. just do `ng g c nameofcomponent ` and after to use it you just need to use it for ex: `` this is assuming that the prefix of your components are app – Tiago Neiva Sep 17 '18 at 08:58

1 Answers1

2

You can create a component. Here is some info on how to create one. If you extract the ng-template and its children to a new component, and place your new component instead of the ng-template in your code you should be set!

Gideon
  • 1,954
  • 3
  • 22
  • 29