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

Issue

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>

Answered By – Chellappan வ

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.