Search code examples
angularng-containerng-content

How to use ng-container with ng-content (with select tag) in angular 4


How do you use ng-container in combination with ng-content that has a select tag.

<div class="container">
  <div id="first">
    <ng-container *ngTemplateOutlet="widgetContent"></ng-container>
  <div>
  <div id="second">
    <ng-container *ngTemplateOutlet="widgetContent"></ng-container>
  </div>
</div>

<ng-content #widgetContent select="side-widget, [sidewidget]"></ng-content>

Solution

  • Try this

    <div class="container">
       <div id="first">
          <ng-container [ngTemplateOutlet]="widgetContent"></ng-container>
       <div>
       <div id="second">
          <ng-container [ngTemplateOutlet]="widgetContent"></ng-container>
       </div>
    </div>
    
    <ng-template  #widgetContent>
       <ng-content></ng-content>
    </ng-template>