javascript - How can I pass in generic HTML to an Angular 2 component?

Question

Welcome To Ask or Share your Answers For Others

javascript - How can I pass in generic HTML to an Angular 2 component?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - How can I pass in generic HTML to an Angular 2 component?

I want to make a generic modal component that can hold anything, from just text to images/buttons etc. If I do something like this:

<div class="Modal">
    <div class="header"></div>
    <div class="body">{{content}}</div>
    <div class="footer"></div>
</div>

I'm not able to actually pass HTML into content, just text. How can I create a component such that the parent component can pass in whatever HTML it wants? What if I wanted to add n number of buttons to the footer, each with it's own callback? Is there a better way I should be doing this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:03:33+0000

What you are looking for is ng-content

 <div class="Modal">
   <div class="header"></div>
   <div class="body">
     <ng-content></ng-content>
   </div>
   <div class="footer"></div>
 </div>

and you may pass any HTML content directly into your component. Lets say your component name is my-modal, you may use it like below,

  <my-modal>
     <<HTML content :  this will be replaced in the ng-content area >>
  </my-modal>

Hope this helps!!

Categories

javascript - How can I pass in generic HTML to an Angular 2 component?

javascript - How can I pass in generic HTML to an Angular 2 component?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags