'How to assign conditional values to angular material Multi Select?

I need the following functionally in material multi-select:

  1. Once None is selected - all the checkboxes are unchecked and 'None' is obviously selected,
  2. But once any value , other than 'None' is selected - the 'None' is unchecked and all the selected items are selected as usual.
  3. Also None should be the preselect value incase nothing is selected...

So - the first issue i did in 2 ways : 1 - Added 'None' to my list and on the change function - deselecting all the rest 2 - Added another option markup with it's own logic

    <mat-option #noneSelected (click)="toggleNone()" [value]="0">None</mat-option>

Problem is i don't know how to check and uncheck material items programmatically - i've tried with ref element - to get the dom element and check / uncheck it, but since it's material element - it's not that straight forward ....

example



Solution 1:[1]

You don't have to manipulate dom just use (selectionChange)event emitter to detect changes here's how it should be done

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ghaith Troudi