angular-material2

I'm trying to set the selected value for multi select drop-down as below //loop to make a multiple check boxes as selected & setting based on condition document.getElementsByTagName('mat-pseudo-checkbox')[index].classList.add('mat-pseudo-checkbox-checked'); document.getElementsByTagName('mat-pseudo-checkbox')[index].setAttribute("ng-reflect-state","checked"); this only reflects the change cosmetically since when i try to retrieve all the selected checkbox through (selectionChange)=filter($event) <mat-select multiple (selectionChange)="filter($event)" formControlName="dropdown"> <mat-option

I am having an EntryComponent that has a material button menu. When I try to override the default style by using ::ng-deep the styling changes for all the button component in the parent Component as well. <style> ::ng-deep .mat-button{ max-width: 50px !important; min-width: 45px !important; height: 5em; } ::ng-deep .mat-button-ripple mat-ripple{ max-width: 40px !important; min-width: 20px !important; } </style> I also tried to target styling using a class but it doesn't work like usual CSS I guess. <style> .actions ::ng-deep .mat-button{ max-width: 50px !important; min-width: 45px !important;