CODEWITHSUNDEEP
angularinputcomponents
Jakob Lithner
Jakob Lithner

Reputation: 4406

Angular2 boolean Input parameter not working

In my Planning component I have the following directive where selectedPerson is an object on the service and showModal is a local boolean parameter in the Planning component:

<person-popup [person]="planningService.selectedPerson" [show]="showModal"></person-popup>

The PersonPopop component has the following simple structure:

import { Component, Input } from '@angular/core';
import { Counselor } from '../entities/counselor';
import { Person } from '../entities/person';
import { Request } from '../entities/request';


@Component({
    selector: 'person-popup',
    templateUrl: './person-popup.component.html',
    styleUrls: ['./person-popup.component.css']
})


export class PersonPopupComponent {

    @Input() person: Person;
    @Input() show: boolean;

    constructor() { }

    public displayCss() {
        return this.show ? "displayBlock" : "";
    }

    public toggleShow() {
        this.show = !this.show;
        console.log("toggleShow: ", this.show)
    }
}

The corresponding HTML view currently looks like this:

<p>{{show}}</p>
<p>{{person?.name}}</p>
<button (click)="toggleShow()">Show</button>

<div class="modal-background {{displayCss()}}" (click)="toggleShow()">
    <div class="modal-content animate">
        {{person?.name}}
    </div>
</div>

When the Planning component is initiated the show property is null. Changes of selectedPerson are always propagated to the popup component but the same is NOT true for the showModal parameter.

When showModal is first set to true in the parent it is set to true in the child component.

The child component will then set its local show property to false. After that it seems "the Input connection is lost" and all subsequent changes of showModal will not propagate to show.

Any suggestions on how to redesign this?

Upvotes: 2

Views: 3440

Answers (1)

n00dl3
n00dl3

Reputation: 21564

You need to use two way binding if you want to propagate the changes from child to parent :

export class PersonPopupComponent {

    @Input() person: Person;
    @Input() show: boolean;
    @Ouput() showChange= new EventEmitter<boolean>();

    constructor() { }

    public displayCss() {
        return this.show ? "displayBlock" : "";
    }

    public toggleShow() {
        this.show = !this.show;
        this.showChange.emit(this.show);
        console.log("toggleShow: ", this.show)
    }
}

then in parent :

<person-popup [person]="planningService.selectedPerson" [(show)]="showModal"></person-popup>

Upvotes: 4

Related Questions