Angular 2 passing html to ng-content with bindings

Question

I'm writing angular components for the foundation css framework. I am working on the tabs component, and want to be able to pass some HTML to the <ng-content> of this.

The problem is, I also need to pass html which a user can put bindings on, like this:

PARENT TEMPLATE

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

TABS COMPONENT

<ul class="tabs" #tabs>
  <li *ngFor="let item of data | async" (click)="tabClick($event)">
      <a>{{item.name}}</a>
  </li>
</ul>
<div>
  <ng-content></ng-content>
</div>

TABS TYPESCRIPT

@Component({
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

export class TabsComponent {
  @Input('data') data:any;
  @ViewChild('tabs') tabs: ElementRef;
}

Where item is a reference to an object in the example array.

However, I get this error: Cannot read property 'name' of undefined as item is being evaluated before it is inserted into the <ng-content> directive.

Is there a way to get around this limitation, or am I going about this the wrong way?

to have a more look about the `ng-content` you can see this [**answer**](http://stackoverflow.com/questions/42735858/how-to-show-hide-bootstrap-modal-from-a-component/42736058#42736058) are you using ng2-bootstrap tabs or material design. you can also refer [**Material Design**](http://stackoverflow.com/questions/42539272/navigate-to-a-particular-tab-on-click-of-button-in-another-tab-angular2-material/42561544#42561544) for tabs example. — Aravind, Mar 18 '17 at 18:51
I'm not using either of those, I am writing some custom components and directives for foundation 6 which don't exist yet, as I prefer that framework. Selectedindex looks useful, but not for this problem! — userqwert, Mar 18 '17 at 18:54
what is your exact problem? where are you using `ng-content`? inside custom or the main component? Which is parent and which is child? — Aravind, Mar 18 '17 at 18:55
What can't work in your code is that you use `item` outside of `*ngFor`, therefore accessing `item in `` can't work. I find it to confusing what you actually try to accomplish to think of a proper workaround. — Günter Zöchbauer, Mar 18 '17 at 19:00

Günter Zöchbauer · Accepted Answer · 2017-10-01T15:02:48.670

49

update Angular 5

ngOutletContext was renamed to ngTemplateOutletContext

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

ngTemplateOutlet or ngForTemplate can be used for that use case:

<tabs [data]='example'>
  <ng-template let-item>
    <div> Age <br> {{item.age}} </div>`
  </ng-template>
</tabs>

@Component({
  ...
  template: `
    <ul class="tabs" #tabs>
      <li *ngFor="let item of data | async" (click)="tabClick($event)">
          <a>{{item.name}}</a>
      </li>
    </ul>
    <div>
      <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template>
    </div>
  `
})
class TabsComponent {
  @ContentChild(TemplateRef) templateRef:TemplateRef;
}

See also Angular 2 bind transcluded content to loop variable

edited Oct 01 '17 at 15:02

answered Mar 18 '17 at 18:59

Günter Zöchbauer

623,577
216
2,003
1,567

The `ngTemplateOutletContext` seems to be `ngOutletContext` on my version. Had to move a few loops around and change a few variable names but it works great. Thanks Günter :) – userqwert Mar 18 '17 at 20:55
Thanks for the feedback. I saw that they changed it, but probably only for 4.0 – Günter Zöchbauer Mar 18 '17 at 22:04
1

an excellent tutorial: http://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ – yonexbat Sep 02 '17 at 10:13
1

in angular 4.0+ `template` has changed to `ng-template` – Blai Samitier Sep 21 '17 at 14:03
Would this keep the Bindings of a click event on the html? Or would angular remove it – AngularM May 21 '19 at 19:38
Not sure what you mean with "click event on the html" mean. If you mean not using Angular binding syntax, then the answer is no (otherwise yes) – Günter Zöchbauer May 21 '19 at 19:45
1

In Angular 14 I write `` instead. – Yasammez Aug 24 '22 at 04:54

Aravind · Answer 2 · 2017-03-18T19:05:25.243

You should be using this way instead,

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

Component typescript

@Component({
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

export class TabsComponent {
  @Input() data:any;
  item:any{};
}

In your content projection define a selector as

 <div class="tabs-body">
        <ng-content select=".tabs-body"> </ng-content>
      </div>

As your passing with bindings

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

DEMO

score -6 · Answer 3 · answered Mar 18 '17 at 19:02

-6

You need to pass the item object to the ng-content component.

<ng-content [item]="selectedTab></ng-content>

I am not certain on what lies behind the tab click event but you can assign that item object to selectedTab which will be passed to the component.

The component that will control the tab view can have the following:

@Input() item: Item;

And this will pass that object when you click. I might be attacking this from the wrong angle but maybe it will help you in some way.

answered Mar 18 '17 at 19:02

Ben Gummelt

9
2

Would that ng-content remember the bindings eg click – AngularM May 21 '19 at 21:39
your solution is ok for component, but please remember `` is an angular element for transclusion – Anton Temchenko Sep 11 '19 at 13:59

Angular 2 passing html to ng-content with bindings

3 Answers3

Linked