Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 Html inside a Component

Tags:

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?

like image 217
Bünyamin Sarıgül Avatar asked Sep 02 '16 12:09

Bünyamin Sarıgül


People also ask

How do I display HTML inside an angular binding?

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.

Can I use HTML in Angular?

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

Can angular component have multiple HTML?

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.


1 Answers

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>

like image 73
j2L4e Avatar answered Sep 21 '22 11:09

j2L4e