0

I have a component for a tabbed menu with a content pane below it, and it's used in this reusable component as follows:

<my-reusable-menu-component>
    <ng-container menu-tabs>
       <li>Some</li>
       <li>Menu</li>
       <li>Tabs</li>
    </ng-container>

    <ng-container page-content>
        <some-detail-component #myComponent/>
    </ng-container>
</my-reusable-menu-component>

Now, I want to be able to perform some template logic in the menu tabs container based on what the state of the page-content component is, like <li *ngIf="myComponent.something">Shown when something is true!</li>

I was wondering whether this is possible in Angular 2+, I have looked at Pass variable in Angular 2 template but it's not really the same case as my problem.

Wessel Loth
  • 253
  • 3
  • 10
  • Are you getting any errors when using `*ngIf="myComponent.something"`? – yurzui Oct 26 '17 at 13:22
  • Yeah, it's a standard `Cannot read property 'something' of undefined` – Wessel Loth Oct 26 '17 at 13:27
  • Try using safe navigation operator `*ngIf="myComponent?.something"` Notice `?` – yurzui Oct 26 '17 at 13:28
  • It keeps throwing the same Error over and over, because `myComponent` never gets defined. It seems that because it's defined in another `ng-container`, the scope is different and it's impossible to access the template variable. – Wessel Loth Oct 26 '17 at 13:30
  • Cannot reproduce. Please check this https://stackblitz.com/edit/angular-us7n1r?file=app%2Fapp.component.ts If you change `something` to `true` then `Menu` appears – yurzui Oct 26 '17 at 13:34
  • AFAIK the scope will be different if we use `ng-template` – yurzui Oct 26 '17 at 13:35
  • Strange, I changed your example to fit my code (using ng-content selectors) and it does work. https://stackblitz.com/edit/angular-djkqaj?file=app/app.component.ts – Wessel Loth Oct 26 '17 at 13:50
  • Then it can be problem with your angular version or something else – yurzui Oct 26 '17 at 13:51
  • That might be it. I'm on ~4.2.6 though, it should be fairly recent. That said, I will try to update it and see what happens. – Wessel Loth Oct 26 '17 at 13:52
  • Try the same basic code in your application – yurzui Oct 26 '17 at 13:53

0 Answers0