I want create a component like a template. For example, instead of writing this everywhere:
<div class="myClass"> <div class="myHeader" id="headerId"> Title </div> <div class="myContent" id="contentId"> <<Some HTML code>> </div> </div>
I want to use a component like:
<my-component title="Title" headerID=headerId contentID=contentID> <<Some HTML code>> </my-component>
How can I implement something like these in Angular2?
If the HTML value contains a <script> tag, Angular by default will not render it as HTML. If you attempt to render a <script> tag through interpolation ({{ & }}), Angular will render the value as text.
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
A component is composed of two Files Ts and HTML mainly. Html is the view. but you can not have multiple templates, as binding will be issue and rendering can not be done. Instead, you can have multiple components inside one component, with each having different templates you need.
Use <ng-content></ng-content>
in your component.
my.component.html
<div class="myClass"> <div class="myHeader" id="headerId"> Title </div> <div class="myContent" id="contentId"> <ng-content></ng-content> </div> </div>
parent.component.html
<my-component title="Title" headerID=headerId contentID=contentID> <<Some HTML code>> </my-component>
Whatever is inside <my-component></mycomponent>
will be rendered in <ng-content></ng-content>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With