<div _ngcontent-c23="" class="input_block">
    <mat-select _ngcontent-c23="" class="form-control equal-padding mat-select ng-tns-c10-17 mat-select-empty" placeholder="Add Job Skills" role="listbox" value="Add Job Skills" ng-reflect-placeholder="Add Job Skills" ng-reflect-value="Add Job Skills" id="mat-select-7" tabindex="0" aria-label="Add Job Skills" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">
        <div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">
            <div class="mat-select-value" ng-reflect-ng-switch="true">
                <!--bindings={
                    "ng-reflect-ng-switch-case": "true"
                    }--><span class="mat-select-placeholder ng-tns-c10-17 ng-star-inserted">Add Job Skills</span><!--bindings={
                    "ng-reflect-ng-switch-case": "false"
                    }-->
            </div>
            <div class="mat-select-arrow-wrapper">
                <div class="mat-select-arrow"></div>
            </div>
        </div>
        <!--bindings={
            "ng-reflect-origin": "[object Object]",
            "ng-reflect-positions": "[object Object],[object Object",
            "ng-reflect-offset-y": "0",
            "ng-reflect-min-width": null,
            "ng-reflect-backdrop-class": "cdk-overlay-transparent-backdr",
            "ng-reflect-scroll-strategy": "[object Object]",
            "ng-reflect-open": "false",
            "ng-reflect-has-backdrop": "",
            "ng-reflect-lock-position": ""
            }-->
    </mat-select>
</div>


# Angular

<div class="form-group" [class.no-bottom-indents]="checkedJobSkills.value.length">
    <div class="input_block">
        <mat-select placeholder="Add Job Skills"
        value="Add Job Skills"
        [class.input_valid]="checkedJobSkills.value.length"
        class="form-control equal-padding"
        (opened)="onToggleSelect(false)"
        (closed)="onToggleSelect(true)">
        <mat-option *ngFor="let jobSkill of jobSkills | async"
        (click)="modificationJobSkills(jobSkill, userJobSkills)">
        {{jobSkill.name}}
        </mat-option>
        </mat-select>
    </div>
</div>