material design lite checkbox with angular2

Question

In my angular2 application I am using a checkbox attached to respective models. These checkboxes are disabled and when model value is available they are checked.

<div class="myCheck">
    <h5>You have choosen so far</h5>
    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Marriage Hall</span> 
    </label>

    <label class="mdl-checkbox mdl-js-checkbox  mdl-js-ripple-effect" >
        <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" disabled />
        <span class="mdl-checkbox__label">Caterer</span>
    </label>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
        <input type="checkbox"  class="mdl-checkbox__input" disabled/>
        <span class="mdl-checkbox__label">Decorator</span>
    </label>
</div>

And in my component:

ngOnInit() {

    componentHandler.upgradeAllRegistered();

    this.hasWhat();
    this.cartService.itemAdded$.subscribe( (id: any) => {
        this.hasWhat();
    });

    this.cartService.itemRemoved$.subscribe( (id: any) => {
        this.hasWhat();
    });

} 
hasWhat(){

    this.progressService.hasWhat().then (
        data => {


            this.hasItems = data;
            if(this.hasItems.hall==true){
                this.hasHall=true
            }
            else{
                this.hasHall=false  
            }
            if(this.hasItems.caterer==true){
                this.hasCaterer=true
            }
            else{
                this.hasCaterer=false
            }

        });
}

This renders checkboxes but without checkmarks even if model values are true. If I remove componentHandler.upgradeAllRegistered(); from OnInit material style is lost but normal checkbox is rendered with respective checkmarks. See images bellow

What exactly is the problem?