Angular 4 - open select on label click

Question

How can I open the select when I click on the label?

<label>filter per category: <span>{{ articleListService.selectedCategory }}</span></label>
<select #category (change)="articleListService.categoryFilter2()" [(ngModel)]="articleListService.formModel.category">
    <option value="">All</option>
    <option *ngFor="let category of articleListService.laCategoryList" value="{{ category.id }}">
        {{ category.name }}
    </option>
</select>

Thank you for you help, i'm lost

Answer 1

Good question, this is more of an HTML 5 thing then an Angular thing. You are going to want to use a for={id} .

So in your specific code, it would look something like this.

<label for="category">filter per category: [cat group shows here]</label>

<select id="category" #category (change)="articleListService.categoryFilter2()" [(ngModel)]="articleListService.formModel.category">
  <option value="">All</option>
  <option *ngFor="let category of articleListService.laCategoryList" value="{{category.id }}">
    {{ category.name }}
  </option>
</select>

• For further reference on how to use for with labels see official MDN on labels.