Is it is possible to use a HTML of one component in another component ? If I go with Selector then it will render with TS Component also (i.e) functionality. I just that particular HTML page to be used multiple places? any ways?
-
Components' use is to use code written once in several places. If you need to re-use a piece of code, then that piece of code should be a component. Please don't treat HTML as stringsChristian Vincenzo Traina– Christian Vincenzo Traina2019-03-04 11:08:11 +00:00Commented Mar 4, 2019 at 11:08
Add a comment
|
1 Answer
Yes it is possible you can create a typescript file which will export that template
export const HTMLTemplate = `here will be the template`
And the you will change templateUrl: 'url' to template: HTMLTemplate
and import the HTMLTemplate from file you have created.
Detail:
You can create typescript file let's call it HTMLtemplate.ts
In that file you will add this line
export const HTMlTemplate = `<div></div>`;
Instead of <div></div> you can use your template you want to share between components.
As a next step you will go to the component where you want to use the shared code and you will change it from this
@Component({
selector: 'app-selector',
templateUrl: './selector.component.html',
styleUrls: ['./selector.component.scss']
})
to this
import {HTMLTemplate} from 'where the HTMLtemplate.ts is';
@Component({
selector: 'app-selector',
template: HTMLTemplate,
styleUrls: ['./selector.component.scss']
})
3 Comments
Felix Christo
Interesting. Can you please explain in detail?
Piyush Jain
You can create a component for that, and wherever you want to use that static content, you can use that component. One issue which I found in your solution is that, you can give only one url in
templateUrl property. If you want to use that static text in your component then it will be difficult.
joka00
I have added some details to the answer.