angular 2 change checkbox checked attr

I'm using angular 2 and I want to change checkbox checked attribute according to response from service. when page loads, checkbox checked is set according to property value I get from the server.

HTML:

<div class="switch minWidth"> <label>Off<input type="checkbox" (click)="toggleRuleActiveState(rule.VbsRuleId,$event.currentTarget.checked)"   [checked]="rule.Active ? true : null"><span class="lever"></span> On </label>         </div>

On the click I invoke a function which returns true of false - I want to set the checked attribute according to that response:

component:

@Component({
    selector: 'vbs',
    templateUrl: './vbs.template.html',
    styleUrls: ['../scss/materialize.css']
})

export class Vbs implements OnDestroy {
    vbsRule: Observable<any[]>;
    toggleResponse: any;
    subscribtion;
    activeState: boolean;
    constructor(private _vbsService: VbsServices) {
    }

    getAllVbsRules(vbsRuleID: number, token: string = '') {
        this.vbsRule = this._vbsService.getVbsRuleDataRequest(vbsRuleID);
    }
    toggleRuleActiveState(ruleId: number, active: boolean) {
        this._vbsService.toggleVbsRuleActivation(ruleId, active)
            .subscribe(x => {
                this.toggleResponse = x;
                this.toggleResponseAction(this.toggleResponse);
            });
    }

    toggleResponseAction(obj) {
        console.log(obj);
        if (obj.StatusCode !== 3) {
            this.activeState = obj.ActiveState;
            //pass this state back to checkbox
        }
    }