CODEWITHSUNDEEP
angular
rajesh
rajesh

Reputation: 2523

Angular 4 : Not able to inherit baseclass by component class

I am new to Angular. I am trying to inherit a base class by a component class. The base class looks like this.

export class QuestionBase<T>{
  value?: T;
  key?: string;
  label?: string;
  required?: boolean;
  order?: number;
  controlType?: string;


  constructor(options: {
      value?: T,
      key?: string,
      label?: string,
      required?: boolean,
      order?: number,
      controlType?: string
    } = {}) {
    this.value = options.value;
    this.key = options.key || '';
    this.label = options.label || '';
    this.required = !!options.required;
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || '';
  }
}

My component looks like this.

    import { Component, Input, forwardRef, Inject, Injectable, Optional  } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    import { QuestionBase, controlMetaData } from './question-base';

    @Component({
      selector: 'checkbox-control',
      templateUrl: './question-checkbox-component.html',
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => CheckboxControlComponent),
          multi: true
        }
      ]
    })

    export class CheckboxControlComponent extends QuestionBase<string> implements ControlValueAccessor { 
      controlType = 'checkbox';
      checkboxState = false;
      constructor(options: {} ={})  { 
         super(options);

      }
     writeValue(value: boolean ){
       this.checkboxState = value;    
     }
    registerOnChange(fn: any){

    }
    registerOnTouched(fn: any){

   }
}

This is throwing error: Can't resolve all parameters for CheckboxControlComponent: (?).

But it works fine when i try to inherit the baseclass by another class like below.

import { QuestionBase } from './question-base';

export class TextboxQuestion extends QuestionBase<string> {
  controlType = 'textbox';
  type: string;

  constructor(options: {} = {}) {
    super(options);
    this.type = options['type'] || '';
  }
}

Please let me know what is going wrong here.

Upvotes: 3

Views: 765

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657158

If the subclass has a constructor, it needs to repeat all constructor parameters of the superclass and forward them to the superclass constructor. TypeScript or Angular DI doesn't automatically merge them.

Also the types of the parameters need to be known to Angulars DI. You don't instantiate component instances yourself in Angular, DI does that for you. For that DI needs to be able to come up with values for the parameters.

This therefore isn't a valid component constructor parameter type:

{
  value?: T,
  key?: string,
  label?: string,
  required?: boolean,
  order?: number,
  controlType?: string
}

Upvotes: 1

Related Questions