Hide checkbox from angular mat-select in case of multiple select?

Question

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?

Answer 1

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?

Answer 2

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?

Answer 3

::ng-deep is deprecated so we can write this class in styles.css

  .mat-option:last-child .mat-pseudo-checkbox  { 
  display: none; 
}

Answer 4

You can add un html ID to the mat-option where the checkbox need to be removed and use css to target the mat speudo checkbox and remove it.

encapsulation: ViewEncapsulation.None in the ts file is required.

<mat-option id="allOption">
 ...
</mat-option>

#allOption > .mat-pseudo-checkbox {
   display: none;
}

Answer 5

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?