1

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

enter image description here

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.

MisterniceGuy
  • 1,646
  • 2
  • 18
  • 41
  • 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](https://stackoverflow.com/a/48499980/1858357) explains in which lifecycle hook different types of data become available. – BizzyBob Apr 10 '22 at 22:07
  • Looks like you’re maybe setting your false as a string? (Which is true) – MikeOne Apr 10 '22 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 Apr 10 '22 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 Apr 10 '22 at 22:52
  • Can you reproduce in [StackBlitz](https://stackblitz.com/fork/angular-ivy) or share more code? Hard to tell from only the code currently in the question. – BizzyBob Apr 10 '22 at 22:53
  • Maybe check with console.log(typeof this.multiSelect)? – MikeOne Apr 10 '22 at 22:56
  • MikeOne.. After some forth and back i think that might have been the issue, i checked and now i get Type of Multiselect: boolean. But what threw me of that the input was defined as boolean and when accessing the this.multiselect it said it was a boolean. So i would have expected some kind of error if the @input passes a string vs a boolean but i never got that. If you want to make this an answer i can close it based on checking type to ensure not string – MisterniceGuy Apr 10 '22 at 23:41
  • Great you found it. FullTemplateChecks should catch this. – MikeOne Apr 11 '22 at 14:59
  • MikeOne, if you can change your comment to answer i can except and close as the only provided Answer is invalid and wrong – MisterniceGuy Apr 11 '22 at 16:38

1 Answers1

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')
    }
}
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • 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 – MisterniceGuy Apr 10 '22 at 22:09