You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.

 

You can pass multi elmenents into ng-content:

home.ts:

@Component({    selector: 'home',    template: `
     
      
Title
      
       Some content
      
      
Footer
     `})

 

widget-two.ts:

@Component({    selector: 'widget-two',    styles:[`:host{    display: block;    border: 3px solid red;}`],    template: `
Above
     
Below
`})

So all three element will be passed into ng-content:

Title
     
      Some content
     
Footer

 

ng-content can add "select" attr, you can use "element tag", "attr", "class / id":

@Component({    selector: 'home',    template: `
     
      
Title
  
      
      
       Some content
      
  
      
      
Footer
  
      
     `})

@Component({    selector: 'widget-two',    styles:[`:host{    display: block;    border: 3px solid red;}`],    template: `
Above
      
      footer-->
      
      Title -->
      
     
Below
`})