title: Not able to pass values b/w components using @Input
body: <p>I want to pass <code>FailedProductId</code> from Component1 to Component2 using <code>@Input</code> but it is not working for me. See my code below</p>
  
  <pre><code>export class Component1 implements OnInit {
  
  public FailedProductId="produt";
  constructor(private employeeService: ProductService) {}
  }
  }
  </code></pre>
  
  <p><code>.html</code> file of Component1</p>
  
  <pre><code>&lt;div&gt; 
   &lt;app-device-list [parentData]="FailedProductId"&gt;&lt;/app-device-list&gt;
  
    &lt;table&gt;
      &lt;th&gt;Id&lt;/th&gt;&lt;th&gt;Active&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Platform&lt;/th&gt;&lt;th&gt;ManagedBy&lt;/th&gt;
  
      &lt;th&gt; Compliant&lt;/th&gt; &lt;th&gt;InProgress&lt;/th&gt;&lt;th&gt;Failed&lt;/th&gt;
  
      &lt;tr *ngFor="let lst of products.Products; let i = index" border="1"&gt;
        &lt;td&gt;{{lst.GroupName}}&lt;/td&gt;
        &lt;td (click)="devicesClicked()"&gt;{{lst.Compliant}}&lt;/td&gt;
        &lt;td&gt;{{lst.InProgress}}&lt;/td&gt;
        &lt;td&gt; &lt;a routerLink="/devicelist/{{lst.ID.Value}}"&gt;{{lst.Failed}}&lt;/a&gt; &lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/table&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p><code>Component2.ts</code> file code</p>
  
  <pre><code>@Component({
    selector: 'app-device-list',
    template: ' &lt;h2&gt;{{"Hello "+ parentData}}&lt;/h2&gt; '
  })
  
  export class Component2 implements OnInit {
  
    @Input() public parentData;
  
    }
  </code></pre>
  
  <p>This line  <code>'&lt;h2&gt;{{"Hello "+ parentData}}&lt;/h2&gt;'</code> giving output <code>Hello undefined</code>.</p>