如何从Angular 5中的组件手动触发选择框更改事件

Question

view.html

<select class="form-control form-control-sm" (change)="filterByProgramName()" [(ngModel)]="filterByProgramNameModel" #SelectedShow>
    <option selected="selected" disabled [ngValue]="empty">Select...</option>
    <option *ngFor="let showname of summaryGraphProgramNames" [ngValue]="showname">{{showname.value}}</option>
</select>

component.ts

import { Component, OnInit, NgZone, ViewChild, ElementRef, Renderer } from '@angular/core'
import { FormsModule } from '@angular/forms'
import * as $ from 'jquery'
@Component({
    selector: 'app-summary-graph',
    templateUrl: './summary-graph.component.html',
    styleUrls: ['./summary-graph.component.scss'],
    providers: [SummaryGraphService]
})

export class SummaryGraphComponent implements OnInit {
    @ViewChild('SelectedShow') SelectedShow:ElementRef
    constructor(public zone: NgZone){}
    manuallyTriggerChangeEvent(value){
        // I am trying to trigger the 'change' event from this function
        // manuallyTriggerChangeEvent is invoked from child component
        // this.filterByProgramNameModel.value = 'new value'
        this.zone.run(() => {        
            this.filterByProgramNameModel.value = value
            // this.SelectedShow.nativeElement.click() ==> working
            this.SelectedShow.nativeElement.change()
            // $(this.SelectedShow.nativeElement).trigger('change')
            //this.filterByProgramName(value)
        })
    }
    filterByProgramName(){
        // some http.get() and update the page value
    }
}