Different pages of my application show same static text. Is there a way by which I can externalize this text in HTML files and then include these files in different angular components.
4
-
Why not simply consider your text as a component?Pablo Cesar Cordova Morales– Pablo Cesar Cordova Morales2017-05-19 03:16:02 +00:00Commented May 19, 2017 at 3:16
-
Why not just store it in *.ts files and import it where you need it?Günter Zöchbauer– Günter Zöchbauer2017-05-19 03:17:42 +00:00Commented May 19, 2017 at 3:17
-
Static text mainly contains different regulations. There are around 30 different regulations in the application. I want to avoid creating so many components and adding them in the app.module. Is there a way to import *.html files?PM_Oz– PM_Oz2017-05-19 03:35:16 +00:00Commented May 19, 2017 at 3:35
-
I don't think so you can import multiple html file in one component, but u can use like this for single html file : templateUrl: './quest-summary.component.html',Karan Singh– Karan Singh2017-05-19 04:58:22 +00:00Commented May 19, 2017 at 4:58
Add a comment
|
1 Answer
One way (really not the best, because of potential security flaws) would be to load your html files using Http and then include them in your StaticHTMLComponent (the html file has to be served by the webserver).
@Component({
selector: 'app-static-html',
templateUri:'static-html.component.html'
})
export class StaticHTMLComponent {
@Input() templatesUri: string[];
constructor(private http: HttpService) {
}
loadTemplates(): Observable<string[]> {
let templates: Observable<string>[] = [];
this.templatesUri.forEach(uri => {
templates.push(this.http.get(uri).map(res => res.text()));
});
return Observable.combineLatest(templates);
}
}
With this template:
<div *ngFor="let template of loadTemplates() | async" [innerHTML]="template"></div>
WARNING
As I said at the beginning of my answer, this may add security flaws to your code, and it has a lot of defaults to me.
First of all, this will not allow you to load css with your static HTML, as it's only meant to load html.
Then, it opens a potential flaw because if one of your static HTML files is corrupted, then you will still load it, with no problems.
Angular is not meant to serve static HTML files, this is a workaround but the best solution would be to serve those static HTML files using your own web server, isolating them from the angular application.
