@Input with promise Angular2

Question

I have the parent component like this:

import { Component } from '@angular/core';

import { UrlService } from '../../services/url.service';

@Component({
   selector: 'wrapPost',
   templateUrl: './app/html/wrapPost.component.html',
})

export class WrapPost {
    dataPost: any;
    url: string;

    constructor(private urlService: UrlService) {}

    ngOnInit(){
        let url = window.location.pathname;
        this.urlService.getData(url)
            .then(res => this.dataPost = res);
    }
}

there is get a dates from server and return this.dataPost. That's well working.

This html of parent templateUrl: './app/html/wrapPost.component.html'

<div class="noteCommonAlign">

    <navigation></navigation>
    <posts [dataPost]="dataPost"></posts>
    <loading class="noteCommonAlign"></loading>
    <pagination [dataPost]="dataPost"></pagination>

</div>

Further the component pagination (the child)

import { Component, Input, SimpleChanges } from '@angular/core';

@Component({
   selector: 'pagination',
   templateUrl: './app/html/pagination.component.html',
   styleUrls: ['app/css/pagination.component.css']
})

export class Pagination {
   pagCurrent: number;
   @Input() dataPost: any;

   constructor(){
   }
    ngOnChanges(changes: SimpleChanges){
        try{
       console.log(this.dataPost);
     } catch(err) {
       console.log(err);
     }
    }
}

I can't get this.dataPost async. When i called without ngOnChanges console.log(this.dataPost) then happen a mistake. I resolved this problem a little. I Used ngOnChanges but in console showed 2 messages. One message with a mistake other with a great result.

How i understand it has happen because ngOnChanges is Lifecycle and called before ngOnInit and whenever one or more data-bound input properties change. I wouldn't like that it's called twice.

How to get a dates from server in a child component has @Input?

I'm sorry for the grammar. I will be glad any solves.

Answer 1

What about

<navigation></navigation>
<posts [dataPost]="dataPost | async"></posts>
<loading class="noteCommonAlign"></loading>
<pagination [dataPost]="dataPost | async"></pagination>

update

With this code

ngOnInit(){
    this.urlService.getData()
        .then(res => this.dataPost = res);
}

You don't need | async because this.dataPost gets the categories assigned, not the Promise.

If you change it to

ngOnInit(){
    this.dataPost = this.urlService.getData();
        //.then(res => this.dataPost = res);
}

then using | async is approriate, but if you actually use | async

<pagination [dataPost]="dataPost | async"></pagination>

then

@Input() dataPost: Promise<any>;

gets passed the categories, not the promise because | async already resolves the promise to get the categories.

Plunker example