Friday, May 10, 2024
 Popular · Latest · Hot · Upcoming
113
rated 0 times [  115] [ 2]  / answers: 1 / hits: 18216  / 6 Years ago, tue, march 13, 2018, 12:00:00

I am using angular-material select to create a drop-down where I have provided options to select multiple values.



 <accordion [showArrows]=true class=programstyle>
<accordion-group heading=EVENTS [isOpened]=true>
<div class=>
<mat-form-field class=width100>
<mat-select class=width100 placeholder=Events [(ngModel)]=studentInput.programType (change)=filter() id=programTypeValueId name=programTypeValueId>
<mat-option disabled>Select Events</mat-option>
<mat-option *ngFor=let program of programs [value]=program.campusEventId>{{program.eventName}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</accordion-group>
<accordion-group heading=SKILLS>
<div class=>
<mat-form-field class=width100>
<mat-select multiple class=width100 placeholder=Select Skills [(ngModel)]=studentInput.skills (change)=filter() id=skillTypeValueId name=skillTypeValueId>
<mat-option disabled>Select Skills</mat-option>
<mat-option *ngFor=let skill of skills [value]=skill.lookupValueId>{{skill.lookupValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</accordion-group>
<accordion-group heading=INTERESTS>
<div class=>
<mat-form-field class=width100>
<mat-option>Select Interests</mat-option>
<mat-select multiple class=width100 placeholder=Select Interests [(ngModel)]=studentInput.interest (change)=filter() id=interestTypeValueId
name=interestTypeValueId>
<mat-option *ngFor=let interest of interests [value]=interest.lookupValueId>{{interest.lookupValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</accordion-group>
</accordion>


This the HTML part.

I have used Select Events in order to define option as Select Events. But i am getting this with checkbox enabled. I don't want the first option in the drop-down to have check-box enabled. Is there any way i can have first option with no-checkboxes?



enter


More From » html

 Answers
30

Each mat-option has a mat-pseudo-checkbox to handle checkbox styles (I inspected it from chrome dev tools). Try this (Angular 5, Material 2):



::ng-deep .mat-option:first-child .mat-pseudo-checkbox{ display: none; }

[#54955] Thursday, March 8, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
miranda

Total Points: 655
Total Questions: 110
Total Answers: 121

Location: Netherlands
Member since Thu, Jul 1, 2021
3 Years ago
;