Dynamic accordion style checkbox menu in angular

Question

I want to create a select menu with dynamic accordion style checkbox options same as the picture below:

or like this:

My data looks like this:

 let allowedShifts = [{
    category: "Days",
    name: "D"
},
{
    category: "Evenings",
    name: "E"
},
{
    category: "Nights",
    name: "N"
},
{
    category: "Days",
    name: "d"
},
{
    category: "Nights",
    name: "n"
}];

I tried to implement the same using multiple select menu but was not able to pipe filter the data based on category. Here is my code for the reference:

HTML:

<select multiple class="form-control" name="shifts" id="exampleSelect2" [(ngModel)]="allowedShifts">
<optgroup label="Days">
    <option [value]="shiftIcon.name" *ngRepeat="let shiftIcon in allowedShifts | filter: {category: 'Days'}">
        {{shiftIcon.name}}
    </option>
</optgroup>
<optgroup label="Evenings">
    <option [value]="shiftIcon.name" *ngFor="let shiftIcon in allowedShifts | filter: {category: 'Evenings'}">
        {{shiftIcon.name}}
    </option>
</optgroup>
<optgroup label="Nights">
    <option [value]="shiftIcon.name" *ngFor="let shiftIcon in allowedShifts | filter: {category: 'Nights'}">
        {{shiftIcon.name}}
    </option>
</optgroup>

Answer 1

Your code is a mix of Angular2 and AngularJS, they're different I bet you can tell from your edit. There is no ngRepeat nor filter pipe in Angular2, I would recommend altering the structure of your allowedShifts array, I dont know your use case so i can't suggest one.
Please read more about Angular, and the *ngFor specifically, use this tutorial from the Angular team, will get you on track quickly.
For the multi select, as shown in the second picture, use Angular Material, pretty simple and does exactly what you want, also created by the Angular team. Will take you a couple of hours if you're completely new, but it's worth the time.