How to conditionally hide/show <li> elements in an <ul> list

[Chris Velevitch]

In an angular2 app, I want to conditionally hide/show list elements in a unordered list. I'm trying to work out how to create a complex *ngIf= expression with a combination of data from the current list item and an injected value, but I need to listen for changes in the injected value. Below is my current attempt.

import {Component, Input, Output, EventEmitter} from 'angular2/core';
import {SL} from './sl';
import {SLListItem} from "./sl_list_item";
import {SLStatus} from "./sl_status";

@Component({
   selector: 'sl-list',
   properties: ['sls'],
   template: `
    <ul>
      <li *ngFor="var sl of sls" *ngIf="slStatus.showOrder && sl.quantity > 0 || !slStatus.showOrder">
        <sl-list-item [sl]="sl" (change)="itemChanged($event)"></sl-list-item>
      </li>
    </ul>
    `,
   providers: [SLStatus],
   directives: [SLListItem]
})
export class SLList
{
   @Input() sls: SL[];
   @Output() onChanged = new EventEmitter<SL>();
   sl: SL;
   slStatus: SLStatus;

   constructor(private _slStatus: SLStatus)
   {
      this.slStatus = _slStatus;
   }

   itemChanged(event:SL):void
   {
      console.log('SLList.itemChanged:',this, event);
      this.onChanged.emit(event);
   }
}

 

[Günter Zöchbauer]

see also http://stackoverflow.com/questions/35100716/angular-2-two-structural-directives-on-the-same-dom-element