How to reference parent's parameter in child function argument?

Issue

In Angular 6.0.7, I have a parent class wj-flex-grid-parent.class.ts. It has the parameter public m_wjcGridXlsx = wjcGrid.xlsx; I’m able to successfully reference this parameter from my child component using this.m_wjcGridXlsx.

One function in the child component is still giving me problems when trying to reference m_wjcGridXlsx in its argument:

public _exportFormatItem(args: m_wjcGridXlsx.XlsxFormatItemEventArgs) {
...
}

this.m_wjcGridXlsx gets highlighed by intellisense and says Cannot find namespace ‘m_wjcGridXlsx’. How can I reference the m_wjcGridXlsx parameter here in the arg? I’ve tried preappending this. and self. to no avail.

Parent Component:

import { OnInit, ViewChild, AfterViewInit } from '@angular/core';
import * as wjcGridXlsx from 'wijmo/wijmo.grid.xlsx';
   
export class WjFlexGridParent implements OnInit
{    
    
    public m_wjcGridXlsx = wjcGridXlsx;    // the parameter giving me problems

...
}

Child Component:

import { Component, OnInit, Input, Output, OnChanges, SimpleChanges, ViewChild, EventEmitter, HostListener } from '@angular/core';
import { WjFlexGridParent } from '../fw/wijmo/wj-flex-grid-parent.class';

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...']
  })

  export class ChildComponent extends WjFlexGridParent implements OnChanges, OnInit {

    randomFunction() {  
     // this works, m_wjcGridXlsx is recognized:
     this.m_wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.m_grid, { includeColumnHeaders: true, includeCellStyles: false, formatItem: null }, strFileName);
    }


    // this doesn't work, m_wjcGridXlsx is not recognized:
    public _exportFormatItem(args: m_wjcGridXlsx.XlsxFormatItemEventArgs) { 
       ...
    }

  }
    

Solution

In your code

import {
  Component, OnInit, Input, Output, OnChanges, SimpleChanges, ViewChild,
  EventEmitter, HostListener
} from '@angular/core';
import { WjFlexGridParent } from '../fw/wijmo/wj-flex-grid-parent.class';

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...']
})
export class ChildComponent extends WjFlexGridParent implements OnChanges, OnInit {
  _exportFormatItem(args: m_wjcGridXlsx.XlsxFormatItemEventArgs) {}
}

You are using an undeclared identifier, m_wjcGridXlsx. There is simply nothing named m_wjcGridXlsx in scope. You have indeed inherited a property named m_wjcGridXlsx from WjFlexGridParent, but, as with any property, you must qualify, in this case with either this or super.

However, if we write

_exportFormatItem(args: this.m_wjcGridXlsx.XlsxFormatItemEventArgs) {}

this.m_wjcGridXlsx is a value being used where a namespace is expected.

The simple, and idiomatic solution is to import the type and use it.

import {XlsxFormatItemEventArgs} from 'wijmo/wijmo.grid.xlsx';

export class ChildComponent {
  _exportFormatItem(args: XlsxFormatItemEventArgs) {}
}

This is entirely unrelated to inheritance and classes and properties. It just importing a type from a module so we can use it to annotate a value, in this case the parameter args.

If you prefer, you can use a module namespace import and reference the type qualified by the namespace alias you create in the import statement.

import * as wijmo from 'wijmo/wijmo.grid.xlsx';

export class ChildComponent {
  _exportFormatItem(args: wijmo.XlsxFormatItemEventArgs) {}
}

Answered By – Aluan Haddad

Answer Checked By – Marilyn (AngularFixing Volunteer)