Typescript if condition with boolean not working properly

Question

There is something strange going on and I really don't know why.
In my angular project I have a component which has a child-component. The parent component's html is like this:

<child-component [isEditable]="isEditable"></child-component>

In parent component ts I declared the property "isEditable" :

isEditable: boolean = true;

and then in ngOnInit:

this.isEditable = false;

Then in child component I have the correspondent input property with default value:

@Input() isEditable: boolean = true;

When this value changes to false from the parent, I need to implement some logic. The problem is that both in ngOnInit and ngOnChanges of the child component, if I do

if(!this.isEditable) {
   console.log("DO SOMETHING");
}

It doesn't enter the condition. So I thought about some "delay" in receiving the new value, added a console.log before the if condition but it turned out it was correctly false.
I ended up doing this in ngOnInit method:

console.log("BEFORE IF", this.isEditable);
if(this.isEditable){
   console.log("ENTERED IN TRUE", this.isEditable);
}

and this is the output:

I really don't get what's wrong. The property is false as it should be but it enters the condition with true. I'm sure it's something stupid but I don't get it...

Is the change detection strategy of parent component OnPush? — Harun Yilmaz
– Harun Yilmaz, Commented Oct 2, 2019 at 8:54
Can you try console.log(typeof this.isEditable)? Because this make it seems like it's a string "false" which is a trurthy value. — VLAZ
– VLAZ, Commented Oct 2, 2019 at 9:00
Are you sure you didn't write isEditable="isEditable" instead of [isEditable]="isEditable" ? — user4676340
– user4676340, Commented Oct 2, 2019 at 9:02
@Usr then please, provide a minimal reproducible example of your issue and/or your full code so that we can find the error. Because clearly, your console log displays a string, and a stated, it behaves like the variable is a string. — user4676340
– user4676340, Commented Oct 2, 2019 at 9:03
@Usr you've declared it as a boolean but the type system only exists at compile time. If you've done something to the effect of this.isEditable = userInput as boolean then that forces the compiler to accept the value is a boolean even when it won't be. Since this passes compilation, at runtime you'd get this sort of behaviour - there are no type checks at this point. — VLAZ
– VLAZ, Commented Oct 2, 2019 at 9:04

michelepatrassi · Accepted Answer · 2019-10-02 11:51:35Z

1

Use a setter on the input

  @Input() set isEditable(isEditable: boolean) {
    console.log('isEditable', isEditable);
  }

this code will run every time isEditable will change from the parent.

Also using ngOnChanges is a valid approach, but you will need to filter to the property you need. You can find an example in the official docs.

answered Oct 2, 2019 at 11:51

michelepatrassi

2,09620 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4676340 · Accepted Answer · 2019-10-02 09:00:52Z

0

ngOnChanges offers a parameter that you can use of type SimpleChanges.

ngOnChanges(changes: SimpleChanges) {
  console.log(changes.isEditable.currentValue);
}

Try using this variable instead of your input, see what happens.

answered Oct 2, 2019 at 9:00

user4676340

Collectives™ on Stack Overflow

Typescript if condition with boolean not working properly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related