noydb/oworms-ui

<ow-hero>
    <ow-random-top/>
</ow-hero>

<section>
    <ow-filter/>
    <div *ngIf="state === ComponentState.COMPLETE; else placeholder">
        <ow-word-card *ngFor="let word of words | chunkPipe: wordsToShow" [word]="word"/>
    </div>
    <div *ngIf="state === ComponentState.COMPLETE">
        <button class="transparent below"
                (click)="showMoreOrLess(false)"
                [disabled]="increment > wordsToShow">
            Show {{ increment }} Less
        </button>
        <button class="transparent below"
                (click)="showMoreOrLess(true)">
            Show {{ increment }} more
        </button>
        <button (click)="showAll()" class="below">
            Show All
        </button>
    </div>
</section>

<ng-template #placeholder>
    <ow-placeholder [state]="state" [errorMessage]="errorMessage"/>
</ng-template>