Angular 4 how can i do trigger change like jquery trigger('change')

Question

I am trying to trigger change in angular 4 for input field after put value in it by this.my_var = my_val, and then how can I trigger change event?

Code-

import { Component, OnInit,OnDestroy, Renderer, ElementRef, ViewChild } from '@angular/core';
 @ViewChild('mka_gb') mka_gb:ElementRef;
 
 constructor(private router: Router, private renderer:Renderer) {  }

  ngOnInit() {
    this.getOverviewData(); 
    let search = window.localStorage.getItem('search_val');
    window.localStorage.setItem('search_val', '');
    console.log(search);
    if(search != '') {
      setTimeout(()=>{
        this.mka_search = search;
        let event = new MouseEvent('click', {bubbles: true});
        this.renderer.invokeElementMethod(
        this.mka_gb.nativeElement, 'dispatchEvent', [event]);
      },300);
      
    }
  }

<input #mka_gb type="text" pInputText size="50" placeholder="Global Filter" class="form-control" [ngModel]="mka_search">

Answer 1

You can use ViewChild:

import { Component, Renderer, ElementRef, ViewChild } from '@angular/core';
@Component({
  ...
  template: `
...
<input #fileInput type="file" id="imgFile" (click)="onChange($event)" >
...`
})
class MyComponent {
  @ViewChild('fileInput') fileInput:ElementRef;

  constructor(private renderer:Renderer) {}

  exampleFunctionWhenYouWantToFireEvent() {
    let event = new MouseEvent('click', {bubbles: true});
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);
  }
}