Hide checkbox from angular mat-select in case of multiple select?
13,880
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; }
Author by
dprophecyguy
Past Job:Ras Al Ghul at League of Shadows. Currently working at Illuminati as Chief Engineer. Always admire to become one of the biggest oppressor.
Updated on June 09, 2022Comments
-
dprophecyguy almost 2 years
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? -
Garrett Motzner about 5 yearsIn what way is the version relevant to answering the question? It appears you were able to provide one answer to the question without that information...
-
Amitesh almost 5 years::ng-deep is deprecated in angular 6 or above perhaps.
-
refaelio over 4 yearsIt's deprecated but there's no any practical alternative
-
Guntram about 2 years>> It's deprecated but there's no any practical alternative That is not true! You can use
encapsulation: ViewEncapsulation.None
...