Angular2 @Input for *ngIf is not working (null)

Question

I'm on version ~2.1.1

I tried the answer here but no suggestions worked for me: Angular 2 Component @Input not working

Here is my spinner component that I'm using in another component:

import {Component} from '@angular/core'
import {Post} from './post'
import {PostsService} from './posts.service'


@Component({
    selector: 'home',
    template: `<h2>Posts</h2>

        <spinner [visible]="isloading"></spinner>

        <ul *ngFor="let post of posts" class="list-group">

            <li class="list-group-item"> {{post.body}}  </li>

        </ul>
    `,
    providers:[PostsService],

})

export class PostsComponent{

    posts:Post[];
    isLoading:boolean = true;

    constructor(private _postsService: PostsService){

   }

     ngOnInit(){

       this._postsService.getPosts()
            .subscribe(posts => {
                this.isLoading = false;
                this.posts = posts;
            });
     }


}

Here is what is output in the browser for the tag:

<!--template bindings={
  "ng-reflect-ng-if": null
}-->

I also tried initializing 'visible' to true in ngOnInit() and the spinner will show but I cannot then hide it again by setting isloading to false;

Answer 1

Your variables aren't named the same between template and component.

In the template you've got 'isloading', and in the component 'isLoading'.

Casing matters.