src/app/component/filter/modal/filter-modal.component.html
<div id="overlay" [class.show]="show">
<h2>Advanced Filter</h2>
<form [formGroup]="form">
<div>
<fieldset>
<input formControlName="word" name="word" placeholder="word"/>
</fieldset>
<fieldset>
<ow-select titleLabel="parts of speech"
(valueChange)="selectPartOfSpeech($event)"
[multiSelect]="true"
[values]="selectedPos"
[options]="posOptions"
[transparent]="true"/>
</fieldset>
<fieldset>
<textarea [required]="true"
formControlName="definition"
name="definition"
placeholder="definition"></textarea>
</fieldset>
<fieldset>
<textarea formControlName="origin" name="origin" placeholder="origin"></textarea>
</fieldset>
</div>
<div>
<fieldset>
<input formControlName="example"
name="example"
placeholder="example"/>
</fieldset>
<fieldset>
<ow-select titleLabel="tags"
(valueChange)="selectTags($event)"
[multiSelect]="true"
[values]="selectedTags"
[options]="tagOptions$ | async"
[transparent]="true"/>
</fieldset>
<fieldset>
<input formControlName="note" name="note" placeholder="note"/>
</fieldset>
</div>
</form>
<section id="actions">
<button (click)="filter()" [disabled]="noValues">
Filter
</button>
<button (click)="cancel()" class="below transparent">
Cancel
</button>
</section>
</div>