Identifier 'n' not defined, 'object' does not contain such a member

Question

Visual Studio Code (1.17.0) generates errors in Angular templates when I address members from inherited types that are not on the base class and the base class is declared on the component.
In the code below, obviously maxLength does not exist on QuestionBase, but how do I go about this?

[Angular] Identifier 'maxLength' is not defined. 'QuestionBase' does not contain such a member

export class QuestionBase {
  id: number;
  order: number;
}

export class TextQuestion extends QuestionBase {
  maxLength: number
}

On the component question is declared as QuestionBase, so that it can become any kind of question

@Import question: QuestionBase

Now in the html template I addres the maxLength property:

<input type="text" class="form-control" id="maxLength" [(ngModel)]="question.maxLength" name="maxLength" />

Solution 1

Try like this :

QuestionBase.ts

export class QuestionBase {
  id: number;
  order: number;
}

export class TextQuestion extends QuestionBase {
  maxLength: number
}

component.ts

import { QuestionBase } from './';

export class Component {

    private question: QuestionBase = new QuestionBase();

    constructor() { }
}

component.html

<input type="text" class="form-control" id="maxLength" [(ngModel)]="question.maxLength" name="maxLength" />

Solution 2

I have solved the problem by creating a seperate component for eacht questiontype. On each controller you can then specify the questiontype at the @Input().

<div [ngSwitch]="question.type">
  <app-text-question *ngSwitchCase="'text'" [question]="question"></app-text-question>
  <app-checkbox-question *ngSwitchCase="'checkbox'" [question]="question"></app-checkbox-question>
</div>

TextQuestion

import { Component, OnInit, Input } from '@angular/core';
import { TextQuestion } from '../../_model/text-question';
@Component({
  selector: 'app-text-question',
  templateUrl: './text-question.component.html',
  styleUrls: ['./text-question.component.css']
})
export class TextQuestionComponent implements OnInit {
@Input() question: TextQuestion ;

 constructor() { 
 }

 ngOnInit() { 

And the same for the CheckboxQuestion:

import { Component, OnInit, Input } from '@angular/core';
import { CheckboxQuestion } from '../../_model/checkbox-question';

@Component({
  selector: 'app-checkbox-question',
  templateUrl: './checkbox-question.component.html',
  styleUrls: ['./checkbox-question.component.css']
})
export class CheckboxQuestionComponent implements OnInit {
@Input() question: CheckboxQuestion
  constructor() { }

  ngOnInit() {
  }

}