ActiveListComponent<T>

COMPONENT

<uiloos-active-list/>

A component which wraps the ActiveList from @uiloos/core.

Since 1.0.0

Properties

• activeList

  ActiveList<T>

  The exposed ActiveList.

  Since 1.0.0

• config

  ActiveListConfig<T>

  An @Input for the initial configuration of the ActiveList.

  Since 1.0.0

• uiloosActiveList

  any

  An reference to the ActiveListDirective.

  Since 1.0.0

Example

Uses the "<uiloos-active-list />" component together with the "*uiloosActiveList" directive to create a list with three items: a, b and c of which only one item can be active. Clicking an item makes it active.

<uiloos-active-list 
  [config]="{ 
    active: 'a', 
    contents: ['a', 'b', 'c']
  }"
>
  <ul *uiloosActiveList="let activeList">
    <li
      *ngFor="let content of activeList.contents"
      (click)="content.activate()"
    >
      {{content.value}} 
      {{content.isActive ? 'active' : 'inactive'}}
    </li>
  </ul>
</uiloos-active-list>