CODEWITHSUNDEEP
angulartypescript
user11580406
user11580406

Reputation:

How do you tell a component to use a specific template file?

I am not sure how to phrase my question, so it would be better if I explain the feature I want to implement.

I have a material dialog component that I want to act as a generic dialog. The content of the dialog's body will be depend on what button the user clicks on. For example, if the user clicks a "host game" button, the dialog will show with the relevant content. I do not want to implement this with multiple *ngIf because the template of the dialog will get too large as I add more features.

I was wondering if it would be possible to have template reference variables in one dialog component that would point to the path of a template file, and the correct template will be shown via string interpolation or by some other means of injection?

In otherwords, can I dynamically inject the contents of one template file into a component, so that component can inject that template into its own template?

////script
@Component({...})
export class GenericDialogComponent implements OnInit {

  templateRef0 = ...
  templateRef1 = ...

  shownTemplate = null;

  constructor(@Inject(MAT_DIALOG_DATA) public chosenFeature) {}

  ngOnInit() : void {
    if (this.chosenFeature == "template0"){
       this.shownTemplate = this.templateRef0;
    } else if (this.chosenFeature === "template1")  {
       this.shownFeature = this.templateRef1;
    }
  }

}

////template

<main>

<section>
 {{shownTemplate}}
</section>


</main>

////example of the file structure
generic-dialog/
  template0.html
  template1.html
  generic-dialog.component.ts
  generic-dialog.component.html
  generic-dialog.component.css

Upvotes: 0

Views: 99

Answers (2)

Delwyn Pinto
Delwyn Pinto

Reputation: 612

You can implement this using the selector attribute of a component & services.

Each @Component directive has a selector attribute. The template(html) of the component is rendered where this selector is placed. Once the component is imported in the app.module / feature module based on the project, this selector can be added in any component's html file & it will render.

As for handling button click like events, I'd recommend the action to be handled in a service for ease of development.

Upvotes: 0

RonCG
RonCG

Reputation: 369

Please refer to the official documentation for details on how to achieve what you want -> https://angular.io/guide/dynamic-component-loader

I think the documentation explains it very well but, basically, you define an ng-template with a directive, this lets angular know where the dynamic components should be loaded. Then you get the components that you want to show dynamically from a service (or from whenever you want) and you use the ComponentFactoryResolver to resolve a ComponentFactory for each component, and then use that and the directive you previously defined to create the component inside the ng-template.

In your particular case, you just have to handle the logic to see which component to create inside of your GenericDialogComponent. Just keep in mind that you have to create a component for every html you want to have, you can't create individual html files without a component and point to them.

Upvotes: 0

Related Questions