Transclusion in Angular4

Add this code in ts file Now updated to Angular4

 
import { Component, Input } from '@angular/core';

@Component({

  selector: 'block',
  templateUrl: './block.component.html',
  styleUrls: ['./block.component.css']
})
export class BlockComponent {
  @Input()
    public header: string = 'This is header';
    @Input()
    public footer: string = 'This is footer';
 }
 

<div class="card">
  <div class="card-header p-1">
       <ng-content select=".blocktTop"></ng-content>
  
    </div>
    
   
   <ng-content></ng-content>
 
    <div class="card-footer  p-1">
         <ng-content select=".blocktBottom "></ng-content>
    </div>
 
</div>

//we are calling block element for transclusion

 
<block>
  
    <div class="blocktTop d-flex justify-content-start">   Header
                               
                                Button 1
                                Button 2</div>
 
  
 <div class="card-block p-1">
    <h4 class="card-title">You can put any content here</h4>
    <p class="card-text">Lorem Ipsum is simply dummy text of the printing and
      typesetting industry. Lorem Ipsum has been the industry's standard dummy
      text ever since the 1500s, when an unknown printer took a galley of type
       and scrambled it to make a type specimen book. It has survived not only
        five centuries, but also the leap into electronic typesetting, remaining
         essentially unchanged. It was popularised in the 1960s with the release
         of Letraset sheets containing Lorem Ipsum passages, and more recently
         with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
</p>
  
  </div>
 
   
    
    <div class="blocktBottom d-flex justify-content-center ">
       Close
                                Save</div>
</block>
<br>
<block>
  
    <div class="blocktTop"> 
                                
                                Button 1
                                Button 2</div>
 
   <div class="blockBody">
<div class="card-block p-1">
    <h4 class="card-title">You can put any content here</h4>
    <p class="card-text">For example this line of text and</p>
    This button
  </div>
 
   </div>
  
    
    <div class="blocktBottom">
       Close
                                Save</div>
</block>
  <br>
<block>
  
    <div class="blocktTop"> 
                                
                                 Header</div>
 
   <div class="blockBody">
<div class="card-block p-1">
    <h4 class="card-title">You can put any content here</h4>
    <p class="card-text">For example this line of text and</p>
    This button
  </div>
 
   </div>
  
    
    <div class="blocktBottom">
      footer</div>
</block>

After clicking on demo link go to to the transclusion tab Demo Link

Leave a Reply

Your email address will not be published. Required fields are marked *