Multiple template urls Angular 6

Question

I am building a front-end in Angular 6, and I will need a couple of components that need to have different html structures based on who is logged in.

This can vary from 2 to 20+ different templates, so I would really like to be able to have those in different files, and point the templateUrl to the correct file instead of using *ngIf to decide what part of a template should render.

Is there any possible way to do this?

score 0 · Answer 1 · answered Jul 19 '18 at 08:06

0

You can use innerHtml attributes in template and you can give template dynamically

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) {

 // write condition here

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

answered Jul 19 '18 at 08:06

Chintan Kukadiya

784
5
16

Won't this break the angular variables in the html? That is {{ myVariable }} – h3li0s Jul 19 '18 at 08:09
did you try out this? You have to puts all your variables in component – Chintan Kukadiya Jul 19 '18 at 08:11
I just tested this, and angular variables don't work, and neither does the styling – h3li0s Jul 19 '18 at 08:17

Multiple template urls Angular 6

1 Answers1