title: How to trigger a change in value with ngOnchanges?
body: <p>I have a parent component and a reusable child component. I want to triger the values in the child component and display the result as the input in parent component changes without using any submit button. Whenever there is any change in the input value I want to invoke the mySubmit() function the child or reusable component with the updated value as it is reponsible for rendering the figure.</p>
  <p>In the parent component (app.component.ts) :-</p>
  <pre><code>*export class AppComponent implements OnInit  {
  
    title = 'stl-app';
    filename:string=&quot;&quot;abc;
    colorname:string ='red';
    perspective:string='35';
  
    @ViewChild(reusableAppComponent) child:reusableAppComponent;
  
    constructor(){}
  
    ngOnInit():void{
  
    }
  
    ngOnChanges(changes:SimpleChanges){
          this.child.mySubmit();
    }
  
   ngAfterViewInit(){
      this.child.mySubmit();
    }
  
     changedcolor(ev :Event){
  
      let c=(&lt;HTMLSelectElement&gt;ev.target).value;
      console.log(&quot;Hello&quot; + c);
      this.colorname=c;
      this.child.mySubmit();
  
    } 
  }*
  </code></pre>
  <p>In the parent component.html file (appcomponent.html) :-</p>
  <p>*</p>
  <pre><code>&lt;div&gt;
  &lt;reusable-app [filename]= &quot;filename&quot; [colorname] = &quot;colorname&quot; [perspective]= &quot;perspective&quot;&gt;&lt;/reusable-app&gt;
  &lt;/div&gt;
  &lt;div class=&quot;stl&quot; style=&quot;position:absolute; right:500px;&quot;&gt;
  &lt;mat-form-field style=&quot;width:600px&quot;&gt;
    &lt;mat-label&gt;Name of the file&lt;/mat-label&gt;
    &lt;mat-hint&gt; File path of only stl file&lt;/mat-hint&gt;
    &lt;input  matInput [(ngModel)]=&quot;filename&quot;  name=&quot;filename&quot;  required&gt;
    &lt;/mat-form-field&gt;
  &lt;br&gt;&lt;br&gt;
    &lt;mat-form-field&gt;
      &lt;mat-label&gt;Camera Perspective&lt;/mat-label&gt;
      &lt;mat-hint&gt; values in Integer&lt;/mat-hint&gt;
      &lt;input  matInput [(ngModel)]=&quot;perspective&quot;  name=&quot;perspective&quot;  required&gt; 
      &lt;/mat-form-field&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;mat-form-field&gt;
        &lt;mat-label&gt;Select a Color&lt;/mat-label&gt;
        &lt;mat-select (change) =&quot;changedcolor($event) [(ngModel)]=&quot;colorname&quot; name=&quot;colorname&quot; required&gt;
          &lt;mat-option&gt;None&lt;/mat-option&gt;
          &lt;mat-option value=&quot;red&quot;&gt;red&lt;/mat-option&gt;
          &lt;mat-option value=&quot;blue&quot;&gt;blue&lt;/mat-option&gt;
          &lt;mat-option value=&quot;orange&quot;&gt;orange&lt;/mat-option&gt;
          &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  </code></pre>
  <ul>
  <li></li>
  </ul>
  <p>In the child component.ts (Reusableappcomponent.ts) :-</p>
  <pre><code>*export class ReusableAppComponent implements OnInit {
    
  @Input()
  filename:string;
  @Input()
  colorname:any;
  @Input()
  perspective:number;
  
  private scene: Scene;
  private camera: PerspectiveCamera;
  private renderer: WebGLRenderer;
  @ViewChild(&quot;myCanvas&quot;) myCanvas:any;
  
    constructor(private service:ImlStlAppService,private render:Renderer2,private http: HttpClient,private sanitizer: DomSanitizer) {
     }
  
    ngOnInit(): void {
       //add listener for the resize of the window - will resize the renderer to fit the window
       let global = this.render.listen('window', 'resize', (evt) =&gt; {
        this.onWindowResize();
      })
    }
    mySubmit(){
  
  //Render using the input parameters
  
  }
  
  }*
  </code></pre>
  <p>In the child component.html (ReusableComponent.html) :</p>
  <pre><code>*&lt;div style=&quot;text-align:center&quot;&gt;
  &lt;canvas #myCanvas id=&quot;myCanvas&quot;&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;*
  </code></pre>
  <p>I am confused why the rendering is not changing when I am changing the values in the input.</p>