angular dropdown value doesn't change properly

I'm using angular forms and i want the data to be retrieved after getting the value of the id from the route, so if it's null or undefined get all data if it has value send it in the request. But the problem is it always detects "selectedCatId" as undefind and gets all data although when I debug it's set properly OnInit

my ts code:

ngOnInit(): void {
// this.loadAvailableCourses();
this.selectedCatId = +this.activeRoute.snapshot.paramMap.get('id');

this.getCourseCategories();
}
getCourseCategories() {
this.traineeService.Get('ListTraineeAvailableCourseCategories').subscribe(
(response: Result<CourseCategoryDto[]>) => {
this.categories = response.data.map((x) => ({
labelEn: x['titleEn'],
labelAr: x['titleAr'],
value: x['id'],
}));

},
(error) => {
this.notifyService.ShowNotification(
StatusResult.Falid,
'Error loading available categories'
);
}
);
}
loadAvailableCourses(event: any) {

const catId = {
CourseCategoryId: event,
};
this.traineeService.GetBy(catId, 'ListTraineeAvailableCourses').subscribe(
(response: Result<CourseCycleDto[]>) => {
this.courses = response.data;

},
(error) => {
this.notifyService.ShowNotification(
StatusResult.Falid,
'Error loading available courses'
);
}
);

}



my html

<app-select-input
[(ngModel)]="selectedCatId"

• ="categories"
  (change)="loadAvailableCourses($event)"
  
  ></app-select-input>
  
  
  and select input is shared component:
  
  <div>
  <ng-select
  [class.is-invalid]="ngControl.touched && ngControl.invalid"
  placeholder="--Select"
  [formControl]="$any(ngControl.control)"
  [style]="class"
  [(ngModel)]="value"
  [class.is-invalid]="
  (ngControl.touched || ngControl.dirty) && ngControl.invalid
  "
  (ngModelChange)="modelChange(value)"
  >
  <ng-option *ngFor="let row of list" [value]="row[bindValue]">{{
  row[bindLabel]
  }}</ng-option>
  <!-- <nz-option *ngFor="let row of list" [nzLabel]="row.label" [nzValue]="row.value"></nz-option> -->
  </ng-select>
  
  <div *ngIf="ngControl.control.errors?.['required']" class="invalid-feedback">
  {{ label }} is required
  </div>
  </div>
  
  
  
  I guess the problem is how cycles detect changes but i can't figure it
  
  Continue reading...