title: Angular 4 - Best way to populate child components data
body: <p>I am using @ViewChild in parent component and the parent component depends on child component properties. Now the child component gets data from a REST call which is done in ngoninit. In parent component i have used ngAfterViewInit so that i can get hold of the data of child component, but it seems that ngAfterViewInit gets called when first initialization takes place and any subsequent changes to view are not looked into(Called once after the first ngAfterContentChecked()). something like below</p>
  
  <p>child Component</p>
  
  <pre><code>    @Component({
        selector: "academicyear-detail",
      }) 
      export class AcademicYearDetail  {
        currentYear: string;
        ngOnInit() {
          //do a rest call
          //assign when data arrives
          currentYear = data.currentAcademicYear;
        }
      }
  </code></pre>
  
  <p>Parent Component</p>
  
  <pre><code>      @Component({
           selector: "testProject",
           templateUrl: "app/partials/Main.html",
           directives: [AcademicYearDetail] 
        })
        export class AppComponent { 
          @ViewChild(AcademicYearDetail) acadYearDetail:AcademicYearDetail;
          ngAfterViewInit() {
            this.getChildProperty();
          }
          getChildProperty() {
            console.log(this.acadYearDetail.currentYear);
          }
        }
  </code></pre>
  
  <p>Now the question is</p>
  
  <ol>
  <li>Is there a way to check and wait for child component to be fully rendered?</li>
  <li>Is it better to take care of such scenarios in the parent component, child 
  data load and subsequent logic in parent? But in this way we end up totally 
  duplicating child component data load in all parent components</li>
  <li>Is there any better way to do this</li>
  </ol>