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.

Answer 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')
    }
}