Value for component input undefined in angular

Question

I am trying to pass a post from one component into another component that has an edit form. The outer component fetches the post and passes to the inner component for editing but for some reason it does not pass through so I get a bunch of undefined errors.

The outer component html looks like this:

<wie-edit-post-form *ngIf="post | async; else loading"></wie-edit-post-form>
<ng-template #loading>
    <wie-loading></wie-loading>
</ng-template>

The outer component typescript looks like this:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { Store } from '@ngrx/store';

import { Observable } from 'rxjs/Observable';

import {Post} from "../../common/models/post.model";

import * as fromRoot from '../../common/reducers';
import * as post from '../../common/actions/posts.actions';

@Component({
    selector: 'wie-edit-post',
    templateUrl: "./edit-post.component.html",
    styleUrls: ['./edit-post.component.html']
})
export class EditPostComponent {

    public post: Observable<Post>;

    constructor(private route: ActivatedRoute, private router: Router, private store: Store<fromRoot.State>) {

        this.route.params.subscribe((params) => {
            this.post = this.store.select(fromRoot.getSelectedPost).filter((storePost) => (storePost && storePost.id == parseInt(params.id, 10)) ).map((storePost) => {console.log(storePost); return storePost; });
            this.store.dispatch( new post.LoadPostAction((parseInt(params.id, 10))) );
        })
    }


}

The inner component html looks like this:

<md-card>
    <md-card-header>
        <md-card-title>
            <h1>Edit Post</h1>
        </md-card-title>
    </md-card-header>
    <md-card-content>
        <md-input-container>
            <textarea [(ngModel)]="post.content" mdInput placeholders="Prank"></textarea>
        </md-input-container>
    </md-card-content>
    <md-card-actions>
        <button md-raised-button>Cancel</button>
        <button color="accent" md-raised-button>Edit</button>
    </md-card-actions>
</md-card>

The inner component typescript looks like this:

import { Component, Input, OnInit } from '@angular/core';
import {Post} from "../../common/models/post.model";

@Component({
    selector: 'wie-edit-post-form',
    templateUrl: './edit-post-from.component.html'
})
export class EditPostFormComponent implements OnInit {

    @Input()post: Post;

    ngOnInit() {
        console.log(this.post);
    }
}

The outer component's console.log in the store.select statement correctly print the post to the console but the inner component's console.log statement in the ngOnInit function says it is undefined, so the store is correctly dispatching the LoadPostAction and fetching the post from the server but in the inner component I keep getting the error that post.content is not defined and the post content never shows up in the form.

Any help would be appreciated. Thanks

Answer 1

So... it was something stupid, I wasn't actually passing the post into the component. I had an $ngIF="post | async; else loading" but i didn't have [post]="post | async"