Angular 8 Component Store undefined when referenced from column renderer

[bensullivan]

Hi

We have an Angular 8 component which defines some columns, one of which has a renderer which I'm trying to get to populate a dropdown from a store.

columns = [
    {
      field: 'person',
      text: 'Person',
      editor: {
        type: 'dropdown',
        store: this.personStore,
        clearable: true,
        listeners: {
          change: this.onPersonComboChange
        }
      },
      renderer({ record }) {
        console.log('personStore: ' + this.personStore);
        const person = this.personStore ? this.personStore.getById(record.person) : null;
        return person ? person.text : record.person;
      },
      width: 150,
      locked: true
    }
    .
    .
    .
    .
    .

For some reason, the reference to this.personStore is always undefined and I'm not sure why. I can see the store being populated in the ngOnInit method which is called before a breakpoint set in the column renderer.

What am I doing wrong?

Thanks

Ben

[saki]

Can it be that at the time of definition of columns above is this.personStore not yet defined? Or that `this` doesn't point to the expected instance?

[bensullivan]

Hi Saki

I've set breakpoints and can see the ngOnInit method where the stores are populated is called before the column renderer. Even then, the store references shouldn't be undefined I think as the object property is declared as an empty array in the ng8 component class:

personStore = new Store({data: []});

I think it's more likely the second idea you had that within the column renderer body, the scope does not provide access to the parent component ('this' is referring to something else).

Is it possible to access the parent ng8 component from within the column renderer block?

Thanks!

Ben

[saki]

You can bind a function (column renderer) to any `this` object. For example:

const myRenderer = (({record}) => {
    // function logic
    return result;
}).bind(this);

// ....

renderer: myRenderer

Note: This is just an idea, I haven't test it in the real Grid application.

[bensullivan]

THat worked! Thanks saki!