title: PrimeNG p-listbox background color
body: <p>I am trying to use the PrimeNG's p-listbox component for the first time.  A simple p-listbox seem to work, but when I added the ng-template, things are not working correctly.  So, my example p-listbox control displays both a string and the id in the list fields.</p>
  
  <p>string (id)</p>
  
  <pre><code>&lt;p-listbox #nav id='nav' name='nav' [options]='incidents'
      (onClick)='onNavChange( $event )' multiple='false'
      [listStyle]="{'max-height':'400px'"&gt;
      &lt;p-header&gt;Selected Id: {{ model ? model.IncidentId : 'none'}}&lt;/p-header&gt;
      &lt;ng-template let-incident pTemplate='item'&gt;
          &lt;div class='ui-helper-clearfix'&gt;
              &lt;span&gt;{{incident.IPAddress}} ({{incident.IncidentId}})&lt;/span&gt;
          &lt;/div&gt;
      &lt;/ng-template&gt;
  &lt;/p-listbox&gt;
  </code></pre>
  
  <p>The typescript component code is as follows:</p>
  
  <pre><code>    //
      model: Incident;
      selectedModel: Incident;
      incidents: Incident[] = [
          new Incident( 1, '23.48.167.129', 'arin.net'),
          new Incident( 2, '180.97.158.175', 'ripe.net'),
          new Incident( 3, '103.46.138.150', 'arin.net'),
          new Incident( 4, '145.239.212.60', 'ripe.net')
      ];
      // 
      onNavChange( event ): void {
          // Allow direct call
          const item = &lt;Incident&gt;event.option;
          console.log( `${this.codeName}.onNavChange, Selected item: ${item.IncidentId}` );
          this.model = item;
          //
      }
  </code></pre>
  
  <p>The incident class, I just put at the bottom component:</p>
  
  <pre><code>class Incident {
      constructor(
          public IncidentId: number,
          public IPAddress: string,
          public NIC: string
      ) { }
  }
  </code></pre>
  
  <p>The problem is that once an item is selected, then all of the items are the selected item color.  So, all 4 items are the same color and if one un-selects the listbox, one cannot tell which item was selected.</p>
  
  <p>I am using version 9.0.1 PrimeNG.</p>
  
  <p>Sample image of p-listbox component.
  <a href="https://i.stack.imgur.com/Oxn4p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oxn4p.jpg" alt="p-listbox component"></a></p>