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
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() {
}
}
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]
})
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']
})