Is there a simple way two implement a select with Angular Material, where options are semesters, quarters, and months bound with each other?

Question

I am trying to build a special date-select with Angular Material select, where mat-options are the followings: 1st and 2nd semester, 1st, 2nd, 3rd, 4th quarter, and the 12 months. And I would like it to work, if I select for example 2nd semester, then 3rd and 4th quarter is selected automatically, and from July to December (which are second semester's months also). And if I deselect October, then mat-select automatically deselect 2nd semester, and 3rd quarter, but not the 4th quarter. I hope, I can explain the task properly, for me firstly it seems a quite easy task, however I couldn't implement a solution since many days. Anyone can help me, with anything, how to solve this problem where I would like to bind these date-ranges with each other? Here are some code of my tries, and a picture what I would like to get.

<mat-select multiple>
    <mat-option *ngFor="let semester of dateYear.semesters"
                (onSelectionChange)="selectDateInterval(dateYear.year, semester, $event)">
        {{semester.text}}</mat-option>
    <hr>
    <mat-option *ngFor="let quarter of dateYear.quarters"
                (onSelectionChange)="selectDateInterval(dateYear.year, quarter, $event)">{{quarter.text}}</mat-option>
    <hr>
    <mat-option *ngFor="let month of dateYear.months"
                (onSelectionChange)="selectDateInterval(dateYear.year, month, $event)">{{month.text}}</mat-option>
</mat-select>

(For result I would like to get selected month indexes in an array: First pic: [1,2,3,4,5,6], Second pic: [1,2,4,5,6] (or started indexing with zero))

Unfortunately there isn't attribute, where I can set if a mat-option is selected or not (for example: <mat-option [selected]="randomBoolean">)

I am thankful for any possible solution, even for a Reactive-form approach or a not an Angular Material based solution. Thanks

If you build a reproducible scenario on stackblitz I am sure that will be easy to help you. — Juan Antonio, Aug 12 '20 at 18:47

score 0 · Answer 1 · answered Aug 12 '20 at 18:57

I would suggest a solution including reactive forms: connect a formControl to your mat-select. Then listen to the changes like so:

formControl.valueChanges.subscribe({next: (value) => { your logic here }});

You also need to keep track of what changed in the selection, so that you can act accordingly. Therefore I would recommend using: the rxjs pairwise operator: RxJS observable which emits both previous and current value starting from first emission

Is there a simple way two implement a select with Angular Material, where options are semesters, quarters, and months bound with each other?

1 Answers1