How to insert placeholder, default selected value in a select/dropdown in angular

Issue

I am using reactive form. In a dropdown you cannot insert a placeholder I am trying to have a default value selected in my dropdown for students that do not have extra time allocated to them The dropdown should selected 00:00:00 and disable it if there is no extra time value coming from the DB.

HTML

<select class="form-control" id="extraTimeDuration"  [(ngModel)]="extraTimeIds[link.studentID]">
    <option [value]="0" disabled selected >00:00:00</option>
    <option *ngFor="let extraTimeDuration of extraTimeDurations"[ngValue]="extraTimeDuration.key">
     {{extraTimeDuration.value}}
    </option>
</select>

TS

 export class StudentDisplayComponent {
    
    studentIds: number[] = [];
    extraTimeIds: Record<number, string> = {};
    extraTimeDurations: any[] = [];
    
     ngOnInit(): void {
       this.initForms();
       this.generateExtraTimeDurations()
     }
     
     public populateStudentList( param1?: number,param2?: number,param3?: number) {
       this.paramService
         .getUrl(
           `param-list?param1=${param1}&param2=${param2}&param3=${param3}`
         )
         .subscribe((data) => {
           this.links = data
           this.resetLinks()
           console.log("data returned", " ", data);
           this.studentList = data;
           this.cdRef.detectChanges();
    
           const linked = this.links.filter(x => x.linked);
    
           data.forEach(x => {
             console.log(x.linked, x.studentID);
             
             if (x.linked) this.studentIds.push(x.studentID)
             if (x.electronicReader) this.readerIds.push(x.studentID)
    
             this.extraTimeIds[x.studentID] = x.studentExtraTime ?? '00:00:00'
           });
         });
         }
         
        private generateExtraTimeDurations = () => {
          const increment = 5;
          for (let minutes = increment; minutes <= 1 * 60; minutes += increment) {
            const hours = Math.floor(minutes / 60);
            const remainingMinutes = minutes % 60;
            const formattedHours = hours.toString().padStart(2, "0");
            const formattedMinutes = remainingMinutes.toString().padStart(2, "0");
    
            const value = `${formattedHours} hrs : ${formattedMinutes} min`;
            const key = `${formattedHours}:${formattedMinutes}:00`;
    
            this.extraTimeDurations.push({key, value});
            console.log("extra time units"); 
            console.log(this.extraTimeDurations);
          }
        };
        
       private resetLinks = () => {
           this.studentIds = [];
           this.extraTimeIds = [];
      }
      
      }
     

Solution

You can try using Angular's template-driven forms approach.

<select class="form-control" id="extraTimeDuration"  [(ngModel)]="extraTimeIds[link.studentID]">
    <option *ngIf="!extraTimeIds[link.studentID]" [value]="null" disabled selected>00:00:00</option>
    <option *ngFor="let extraTimeDuration of extraTimeDurations" [ngValue]="extraTimeDuration.key">
        {{ extraTimeDuration.value }}
    </option>
</select>

Answered By - Ale_Bianco