Angular: How to control Select element's "Size" attribute using typescript variables?

Issue

I am trying to replace the size="6" with size="this.groupsList.length" but it's not working. How can this be done?

<select name="groups" size="6">
   <option *ngFor="let group of groupsList">{{group.name}}</option>
</select>  

Background:

I am doing this because the select tag is providing its own scrollbar if the # of elements is > the "size", but since I need to use ngx-perfect-scrollbar instead, I need to change the "size" attribute dynamically. Since I am using ngx-perfect-scrollbar, I need to hide the select tag's scrollbar, but upon doing so it's also hiding some group names (if the "size" attribute is less than the length of groupsList.)

Solution

You just need to do this:

<select name="groups" [attr.size]="groupsList.length">
   <option *ngFor="let group of groupsList">{{group.name}}</option>
</select>  

Answered By - pixelbits