title: angular 5 setting child component property from parent component
body: <p>I want to set the child component property from parent component</p>
  
  <p>parent.component.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;child-detail #myCarousel [childList]="detail.List" &gt;&lt;/child-detail&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>parent.component.ts    </p>
  
  <pre><code>@Component({
    selector: "parent",
    templateUrl: "./parent.component.html",
   })  
  export class AppComponent { 
    public detail; // it is of JSON type
  }
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>@component({
   selector:'child-detail',
   templateUrl: './child.component.html'
  })
  export class ChildDetailComponent{
    @Input() public childList;   // that list of array type
  }
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;div *ngFor = "let list of childList"&gt;
   &lt;li&gt;{{list}} &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know i can set this property by <code>@Input()</code> binding , but this will set only at the time of initializing of the component , I want to set it programmaticaly in intermediate at some point .</p>
  
  <p>I know I can access this child property in parent using </p>
  
  <pre><code>@ViewChild(ChildDetailComponent) childDetailComponent: ChildDetailComponent;
  console.log(this.childDetailComponent.childList);
  </code></pre>
  
  <p>But I want to set it programatically at any event of parent.</p>