Angular true /false fails based on a @Input value

Question

I am running into an issue where i want to decide which script to run based on true or false of an input parameter.

i have in my TS file

@Input() multiSelect: boolean = false;

and then i check

console.log('Multiselect : ' + this.multiSelect)
if(this.multiSelect === false){
   console.log('Hitting Single select')
  } else {
   console.log('Hitting Multiselect')
  }

what's interesting is that i get the below when its set to false

but then when i try to test the logic and set the value not via @Input like below it works correct

multiSelect: boolean = true;

So what am I missing here since as the console log confirms the value of false but it never matches it.

It sounds like @Input() multiSelect is being accessed before the ngOnInit lifecycle event occurs. In this case, the value is undefined which is not strictly equal to false. This answer explains in which lifecycle hook different types of data become available. — BizzyBob
– BizzyBob, Commented Apr 10, 2022 at 22:07
Looks like you’re maybe setting your false as a string? (Which is true) — MikeOne
– MikeOne, Commented Apr 10, 2022 at 22:18
@BizzyBob i get the different stages of the component load, when i call the function that reads the value of the multiSelect input the form is already loaded and i checked when user clicks on button there is no more ngOnInit call as the component is already fully loaded. — MisterniceGuy
– MisterniceGuy, Commented Apr 10, 2022 at 22:23
@MikeOne that's what i thought at first as well, thats why i set the input to boolean and the system complained when i tried "false" that it will always fail since string and boolean don't overlap. — MisterniceGuy
– MisterniceGuy, Commented Apr 10, 2022 at 22:52
Can you reproduce in StackBlitz or share more code? Hard to tell from only the code currently in the question. — BizzyBob
– BizzyBob, Commented Apr 10, 2022 at 22:53

gavgrif · Accepted Answer · 2022-04-10 21:51:12Z

1

Its likely that you are consoling before the @Input() is processed - either use a setter on the @Input() - or put your function inside the ngOnInit() - so that the input variables are processed before the function is called.

@Input() multiSelect: boolean = false;

ngOnInit(): void {
  console.log('Multiselect : ' + this.multiSelect)
  if(this.multiSelect === false){
     console.log('Hitting Single select')
    } else {
     console.log('Hitting Multiselect')
    }
}

answered Apr 10, 2022 at 21:51

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

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

1 Comment

MisterniceGuy Over a year ago

i cant put it on the ngOnInit as it is part of a function call which is called over when a user clicks on a button. What is strange is that the value of multiSelect prints as false efore it executes the function. Also even if the @input does not have value the default is false

Collectives™ on Stack Overflow

Angular true /false fails based on a @Input value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related