Angular 2 - setting templateUrl from a variable?

Question

I am trying to set a template URL from a value that is pulled from a JSON file. That value will be a URL of where Angular should go to fetch the template content. Basically I am trying to come up with some sort of solution that allows the desired HTML template to be set by the user on the backend, and my Angular service makes the request to S3, which sets the templateUrl.

import { Component, OnInit } from '@angular/core';
import { GlobalDirective } from '../../global.directive';

@Component({
selector: 'terms-form',

//need to be able to specify this templateUrl as a variable from the JSON sitting on S3.  

templateUrl: URL value from JSON,  
styleUrls: ['./terms.component.css']
})

export class TermsFormComponent implements OnInit {

constructor(public globalDirective: GlobalDirective) {}


ngOnInit() {
    this.globalDirective.getData();

} }

I found some similar questions here but nothing that worked for my issue. I am using @angular/cli: 1.0.1

Does the information here help: angular.io/docs/ts/latest/cookbook/… — DeborahK
– DeborahK, Commented Apr 26, 2017 at 23:49

Julia Passynkova · Accepted Answer · 2017-04-27 00:31:23Z

1

I think you can't do it but you can always inject a template.

@Component({
  selector: 'my-cmp',
  template: `
      <ng-container [ngTemplateOutlet]="template" [ngOutletContext]="{name: name}"></ng-container>
  `,
})
export class MyCmp {
  @Input() template:  TemplateRef<any>;
  @Input() name: string;

  constructor() {
  }
}

@Component({
  selector: 'my-app',
  template: `
     <my-cmp [template]="one" [name]="'julia'"></my-cmp>
     <my-cmp [template]="two" [name]="'kate'"></my-cmp>

     <ng-template #one><div>here is a template one {{name}}</div></ng-template>
     <ng-template #two><div>here is a template two {{name}}</div></ng-template>
  `,
})
export class App {
  @ViewChild('one',  { read: TemplateRef }) one: TemplateRef<any>;
  @ViewChild('two',  { read: TemplateRef }) two: TemplateRef<any>;

  constructor() {
  }
}

answered Apr 27, 2017 at 0:31

Julia Passynkova

18k6 gold badges36 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

francisct · Accepted Answer · 2017-09-06 03:34:45Z

0

Hey it's been a while but try this: in my case im using my environment file to deliver dependencies

//This is the only way to use resource files dependency injection (expect for using template):
//encapsulating the environment variable in another variable prevents it from being undefined inside @component
//using "" + the variable prevents Error: Cannot find module "." at webpackMissingModule 
var tmp = environment;
@Component({
  selector: 'my-selector',
  templateUrl: "" + tmp.html,
  styleUrls: ["" + tmp.css]
})

answered Sep 6, 2017 at 3:34

francisct

111 bronze badge

Comments

Arslan Munir · Accepted Answer · 2020-05-16 16:34:41Z

0

In my case, i wanted to use two different html templates with different css frameworks. Bulma and bootstrap. Just for testing purposes. I switched the templates based on the environment variable.

In envirnment file

export const environment = {
  useBulma: true
};

and in component

import { environment } from 'src/environments/environment';

@Component({
      selector: 'app-test',
      templateUrl: environment.useBulma ? './with-bulma.component.html' : './with-bootstrap.component.html',
      styleUrls: ['./value.component.css']
    })

answered May 16, 2020 at 16:34

Arslan Munir

4775 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular 2 - setting templateUrl from a variable?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related