CODEWITHSUNDEEP
javascriptangulartypescript
orphen92300
orphen92300

Reputation: 115

Angular 4 - open select on label click

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

Upvotes: 5

Views: 4999

Answers (2)

JGoose
JGoose

Reputation: 35

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.

Upvotes: 1

Taranjit Kang
Taranjit Kang

Reputation: 2580

Found an article that is similar to what you're asking but you have to have the label as a parent of the select?

https://medium.com/browserquirks/browserquirk-programmatically-opening-a-select-box-4ca745a8468f

or maybe try adding a template reference to the select, and then @ViewChild('ThatReference') thatRef: ElementRef;

then maybe when you click label, and it fires event to trigger click event on select via this.thatRef.nativeElement.click()?

Upvotes: 0

Related Questions