Passing dynamic value in this.

[vivid jackal]

Hi guys ,
i have multiple ids that ive declared in the @viewChild

  @ViewChild("genderChipList") genderChipList!: ElementRef;
  @ViewChild("locationChipList") locationChipList!: ElementRef;

now ill pass the id name throught function and get the id dynamically

 isListEmpty('genderChipList')
 isListEmpty('locationChipList')

 isListEmpty(id:any) {
    console.log("the divs======= ", this[id]);
}

but how do i make this work? this[id] is throwing implicitly of any type error. can anyone help?

[solid sapphire]

maybe you can create a Map and add all the ViewChild using the name as a key

[vivid jackal]

i dont understand

@solid sapphire can you please help?

[solid sapphire]

Something in this direction ```ts
private myViewChildMap = new Map<string, ElementRef>();

ngOnInit(){
this.myViewChildMap,set('genderChipList', this.genderChipList);
this.myViewChildMap,set('locationChipList', this.locationChipList);
}

isListEmpty(id:string) {
console.log("the divs======= ", this.myViewChildMap,get('id'));
}

[vivid jackal]

no i got the answer from chat gpt ): , its like way better than me :/

[solid sapphire]

would be nice if you post the solution. could be interesting

and don't worry about ChatGPT, you can learn a lot of things from it, and there are still many stuff that AI can't do 😉

[vivid jackal]

i hope so 😂

[vivid jackal]

    const elementRef = this[id as keyof this];

just added keyof this

[solid sapphire]

oh this actually works at runtime? cool I am surprised

[vivid jackal]

it does

but i think it olny is accepting string

it throws this error boolean is not assignable to type 'this[keyof this]' when i do this with boolean

[solid sapphire]

well it doesn't make sense to pass a boolean

[vivid jackal]

i actually dont understand this

this[keyof this] means that its a key of (this class) right?

@solid sapphire

[solid sapphire]

i guess so

but it's only syntactic sugar, you could also write this[id as any]

[vivid jackal]

not working ):

[solid sapphire]

no? typescript error or runtime error?

[vivid jackal]

ts error

[vivid jackal]

boolean is not assignable to type 'this[keyof this]' this same error

[solid sapphire]

why do you try to pass a boolean? it make no sense. it's like calling this.true

[vivid jackal]

no its due to my scenario

like im having a div

<div class="label" *ngIf="isListEmpty('genderChipList')" >

so if the value changes after view is initialised

throws an error ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

so instead i taught like to make a boolean variable and switch it

i just wanna make this[dynamicBooleanVarible] = true

constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    // Trigger change detection after the view has been initialized
    this.cdr.detectChanges();
  }

  isListEmpty(id: string) {
    const elementRef = this[id as keyof this];
    if (elementRef) {
      return true;
    } else {
      return false;
    }
  }```
i tried this as well but it wont work

[solid sapphire]

that's better because calling a funcition in the template will hurt performance

  myVar = false;

  changeBooleanVar(varName: string, value: boolean) {
    this[varName] = value;
  }

<h1>{{myVar}}</h1>
<h2 *ngIf="myVar"> show or not show</h2>
<button (click)="changeBooleanVar('myVar', true)">change</button>

[vivid jackal]

but this is throwing error too ):

oh you not done yet?

[solid sapphire]

quick tip, don't do this: ```ts
if (elementRef) {
return true;
} else {
return false;
}

just do it like this:```ts
return elementRef;

no need for if/else

[solid sapphire]

I am done... it work here, maybe we have different TS configurations

[vivid jackal]

oh

it throws type error

wait ill check it once tho

[solid sapphire]

try with this:

  changeBooleanVar(varName: string, value: boolean) {
    (this[varName as keyof this] as boolean)  = value;
  }

[solid sapphire]

if elementRef isn't a boolean, you can force it to a boolean using a double negation:```ts
return !!elementRef;

[vivid jackal]

ohw its not throwing any errors so far

but let me check if it works

Conversion of type 'this[keyof this]' to type 'boolean' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. throws this error

changed to unkwon