title: How to pass the values to a reusable component using the @Input annotation?
body: <p>I want to take the user input from app.component and pass these parameters to the ReusableComponent, process that input and display the result. I have a child component in the reusable component known as &quot;mycanvas&quot;.</p>
  <p>In the parent app.component.html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;app-reusable-component [filename]=&quot;'assets/base1.STL'&quot; [colorname]=&quot;'red'&quot; [perspective]=&quot;35&quot;&gt;
  &lt;/app-reusable-component&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;stl&quot;&gt;
  &lt;mat-form-field&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;assets/base1.STL&quot;  name=&quot;filename&quot;  required&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field&gt;
    &lt;mat-label&gt;Name of the color&lt;/mat-label&gt;
    &lt;mat-hint&gt; Color in string&lt;/mat-hint&gt;
    &lt;input  matInput  [(ngModel)]=&quot;red&quot; name=&quot;colorname&quot;  required&gt;
    &lt;/mat-form-field&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;35&quot; name=&quot;perspective&quot;  required&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  </code></pre>
  <p>In the app.component.ts, I have imported the ReusableComponent:</p>
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
  import {ImlStlAppComponent} from 'src/app/iml-stl-app/iml-stl-app.component';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit  {
  
    title = 'stl-app';
  
    constructor(){}
  
    ngOnInit():void{}
  }
  </code></pre>
  <p>I want to pass this parameters as user input to the reusable component and accept the components with @Input annotation:</p>
  <pre class="lang-ts prettyprint-override"><code>export class ReusableComponent implements OnInit {
  
  
  @Input()
  filename:string;
  @Input()
  colorname:any;
  @Input()
  perspective:number;
  
  function doSomething(){}
  }
  </code></pre>
  <p>In the ResuableComponent.html I have:</p>
  <pre class="lang-html prettyprint-override"><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 think I could not able to establish the communication between the reusable component and the app component, so nothing is displayed. Could anyone please guide me?</p>