frontal

Frontal

An Angular select/dropdown component

Installation

Install frontal from npm:

npm install frontal

Usage

Import the FrontalModule:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    FrontalModule,
  ],
})
export class AppModule {}

Use the frontal component and directives:

<frontal [itemToString]="heroToString">
  <ng-template let-value="inputValue" let-isOpen="isOpen" let-highlightedIndex="highlightedIndex"
   let-selectedItem="selectedItem">
    <label frontalLabel>Select your hero:</label>
    <input type="text" frontalInput/>

    <ul *ngIf="isOpen" frontalList>
      <li *ngFor="let hero of filteredHeroes(value); let index=index;" frontalItem [value]="hero"
       [class.highlight]="highlightedIndex === index">
        {{hero.name}}
      </li>
    </ul>

    <div *ngIf="isOpen && filteredHeroes(value).length === 0">
      No heroes found...
    </div>

    <h4>Selected hero:</h4>
    <pre>{{selectedItem | json}}</pre>
  </ng-template>
</frontal>

Example

A couple of implementations can be found on StackBlitz.

Inspiration

• This talk about compound components by Ryan Florence
• The Downshift library

By taking in all this information, I wondered how this would look like in Angular.