CODEWITHSUNDEEP
angular
shatakshi
shatakshi

Reputation: 165

Import One component in another component using ng-content

This is my Page where I am calling two components Panel and jointbutton:

<panel src="a" 
    data1="b" 
    data2="Student Id:"
    data3="Class:"
    data4="Roll No : " data5="Batch : ">
    <joint-button btnname="Edit" icon="glyphicon glyphicon-pencil" color="btn btn-primary"></joint-button>
    <joint-button btnname="Delete" icon="glyphicon glyphicon-trash" color="btn btn-danger"></joint-button>
</panel>

This is my panel.html where i have used 

<div class="col-md-3">
   <div class="custom5">
       <ng-content></ng-content>
    </div>
    <div class="custom6">
        <ng-content></ng-content>
     </div>
 </div>

problem here is both jointbuttons are showing in first <ng-content></ng-content>

So my Question is::

Upvotes: 2

Views: 944

Answers (1)

Chandermani
Chandermani

Reputation: 42669

ng-content can take an attribute select which is a css selector of the element to include\select.

So this should work (i have not tried)

 <div class="custom5">
       <ng-content select="joint-button'[btnname=Edit]'"></ng-content>
    </div>
    <div class="custom6">
        <ng-content select="joint-button'[btnname=Delete]'"></ng-content>
     </div>

Recently this was demo'ed in AngularConnect, see this video https://www.youtube.com/watch?v=4YmnbGoh49U

Upvotes: 2

Related Questions