title: Passing asynchronous value from parent to child component with @Input
body: <p>I am trying to pass a map, which come from an api, from parent to child component, in angular 7. </p>
  
  <p><strong>parent.ts</strong>: </p>
  
  <pre><code>export class AppComponent {
    title = 'taurs-frontend';
    categories: any;
    isLoggedIn = false;
  
  ngOnInit(){
      this.roomDataService.getData(`${environment.api_url}/api/Categories`)
      .subscribe(categories =&gt; {
        this.categories=categories
      }); 
    }
  </code></pre>
  
  <p><strong>parent.html</strong>:</p>
  
  <pre><code> &lt;app-room-card [categories]="categories"&gt;&lt;/app-room-card&gt; 
  </code></pre>
  
  <p><strong>child.ts</strong>:</p>
  
  <pre><code>@Component({
    selector: 'app-room-card',
    templateUrl: './room-card.component.html',
    styleUrls: ['./room-card.component.css']
  })
  export class RoomCardComponent implements OnInit {
      @Input('categories') catname: any;
  
      ngOnInit() {
          console.log('aaa'+ this.catname);
      }
  // ..
  }
  </code></pre>
  
  <p>When I try to log the variable <code>catname</code>, it is <em>undefined</em>. If I try to import variable title from the parent, everything works properly. How can I pass categories to the child, filling it with the values from the API call?</p>