Angular4 on change select box returns wrong value

Question

I want to do something in change event, but change event is returning a value with colon prefix. How to get correct value without prefix and colon?

education.component.html

<select class="form-control custom-select" name="course_id" id="course_id" formControlName="course_id" (change)="onChange($event.target.value)">
    <option value="">--Select--</option>
    <option *ngFor="let course of course_list" [ngValue]="course.id">{{ course.name }}({{course.id}})</option>
</select>

education.component.ts

onChange(value) : void {
   console.log('Course Value',value)
}

For Example: I'm getting the value 2:8. Expected value is 8

Answer 1

You just use [ngValue] when you want to bind objects.

So, as value.id is a primitive value, use [value] instead of [ngValue]:

<option *ngFor="let course of course_list" [value]="course.id">{{ course.name }}({{course.id}})</option>