Angular 2 Material Construction Multi-Screen Dropdown Hierarchy Parent Selection Status

I am working on creating a dropdown with multiple choices in Angular 2 using Material Design. There is a hierarchy in the items and I need to implement a parent-child selection logic similar to a typical tree-like structure where when parent is selected, all children are selected and deselect the parent, deselect all children. This part works great for me.

However, I am running into an issue when displaying the status of the parent when selecting a partial list of children. In this condition, I need to show the "-" sign in the parent checkbox instead of being empty. The current state of my implementation is shown in the snapshot showing the parent checkbox as empty.

Instead, I need this to show something like this:

The code I have for the HTML is below:

<md-select multiple placeholder="Data" class="card-dropdown" [(ngModel)]="selectedDatas" (ngModelChange)="onChange($event)">
            <ng-container *ngFor="let data of datas; let i=index">
                <md-option [value]="data.modified_data" [ngClass]="'one-indent'">{{ data.modified_data + " - " + data.description }}</md-option>
                <ng-container *ngFor="let data of datas[i]?.children; let j=index">
                    <md-option [value]="data.modified_data" [ngClass]="'two-indent'">{{ data.modified_data + " - " + data.description }}</md-option>
                    <ng-container *ngFor="let data of datas[i]?.children[j]?.children">
                        <md-option [value]="data.modified_data" [ngClass]="'three-indent'">{{ data.modified_data + " - " + data.description }}</md-option>
                    </ng-container>
                </ng-container>
            </ng-container>
        </md-select>

      

        
        
        
      

    

Can anyone kindly know me regarding the correct way to solve this problem?

Thanks in advance.