How to set the first option as the default option

Question

I was working on an angular 4 project.
In this project, I have a requirement to set the first option as the default option in the selection list.
But the problem is that this selection field is under the child component, and the data from this selection window is built from the parent component.
For a better understanding, the code is as follows:

html parent component:

<serviceSelect [services]="services"></serviceSelect> 

html child component:

 <select [(ngModel)]="selectedServiceType" [ngModelOptions]="{standalone: true}" (ngModelChange)="getServiceType($event)"> <ng-container *ngFor="let service of settings?.service_type"> <option [ngValue]="service">{{service.name}}</option> </ng-container> </select> 

child component code .ts:

 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms'; @Component({ selector: 'serviceSelect', templateUrl: './serviceSelect.component.html', styleUrls: ['./serviceSelect.component.scss'] }) export class serviceSelectComponent { @Input() services : any; selectedServiceType: any; getServiceType(event) { this.selectedServiceType = event; } } 

We do not have access to the service variable in ngOnInit or ngAfterViewInit .
I tried to set a default value through these functions. If any other suggestion as the first default option let me know.