How to use multiple template urls in Angular 6

Question

How to use multiple template urls in Angular 6

Currently, I am creating a front-end using Angular 6 and facing the challenge of having components with varying html structures based on the user who is logged in.

The number of templates required can range from 2 to over 20, so my preference would be to store them in separate files and have the component point to the correct templateURL instead of relying on *ngIf statements for rendering different parts of a template.

Is there a feasible solution or approach to achieve this dynamic templating in Angular 6?

javascript angular typescript

Answer 1

Answer №1

Incorporate the innerHtml attributes into your template for dynamic customization.

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
            <div [innerHtml]="myTemplate">
            </div>
          `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private myTemplate: any = '';
  constructor(http: HttpClient) {

 // Add your conditions here

    http.get('/template-path', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
  }
}

Answer 2

Incorporate the innerHtml attributes into your template for dynamic customization.

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
            <div [innerHtml]="myTemplate">
            </div>
          `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private myTemplate: any = '';
  constructor(http: HttpClient) {

 // Add your conditions here

    http.get('/template-path', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
  }
}

How to use multiple template urls in Angular 6

Answer №1

Similar questions

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Creating a unique, random output while maintaining a log of previous results

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

Error: Unable to access the 'length' property of an undefined value | Solving the challenge of finding the shortest word within a string | Codewars Problem

Tips for Utilizing Environmental Variables within a Vue Application's index.html File

Revise regular expression for verifying addresses

Error: No 'map' property found in 'TwitterserviceService' type

Issue with Snackbar slide transition not functioning properly in mui 5

Enforcing TypeScript restrictions on method chaining during object creation

Using Javascript to prevent css from changing the display

Struggling with defining types in NextJs when using dynamic imports in Typescript and NextJs

Utilizing the JQuery .not() method to fade out all div elements except for the one that is selected and its corresponding children

The functionality of Angular Flex Layout's Static API for vertical or horizontal space-around with no alignment appears to be malfunctioning

When using .map() to iterate through an array of objects in Next.js, why does the data display in the console but

Increase performance by minimizing unnecessary component re-renders in Next.js using memoization

Stop committing changes in Git when there are any TypeScript errors found

How do the scopes of a controller and a directive's controller differ from each other?

Using the Angular async pipe with an object's property

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

A guide on integrating MySQL table data into React card elements