Inheritance in Angular 2 components

Question

I'm implemeting dynamic form system in my current project using ANgular 2, and so far is going good but I found the following problem:

I have two components that represent a form control like for example:

    @Component({
  selector: 'app-text-area',
  templateUrl: './text-area.component.html',
  styleUrls: ['./text-area.component.css']
})
export class TextAreaComponent implements OnInit {
  label: string;
  formGroup: FormGroup;
  formControlName: string;
  constructor(private injector: Injector) { }

  ngOnInit() {
    this.label = this.injector.get('label');
    this.formGroup = this.injector.get('formGroup');
    this.formControlName = this.injector.get('formControlName');
  }
}

And:

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css']
})
export class InputTextComponent  implements OnInit{
  label: string;
  formGroup: FormGroup;
  formControlName: string;
  constructor(private injector: Injector) { }

  ngOnInit() {
    this.label = this.injector.get('label');
    this.formGroup = this.injector.get('formGroup');
    this.formControlName = this.injector.get('formControlName');
  }
}

As you see both are identical except for the templateUrl, which is displaying different html elements.

So I would like to refactor the code and to create an abstract component to provide the common attributes and logic, and make then, the child classes to inherit the base class (as I would do when using Java). So I have created this class:

export class AbstractFormControl implements OnInit {
  label: string;
  formGroup: FormGroup;
  formControlName: string;
  constructor(private injector: Injector) { }

  ngOnInit() {
    this.label = this.injector.get('label');
    this.formGroup = this.injector.get('formGroup');
    this.formControlName = this.injector.get('formControlName');
  }
}

And I have make the child classes extend the base class like this:

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css']
})
export class InputTextComponent  extends AbstractFormControl{

}

However now I'm getting the following error:

Uncaught Error: Can't resolve all parameters for InputTextComponent: (?).

Can someone explain me what's the right way to do this, or what I'm doing wrong?

yurzui · Accepted Answer · 2017-08-21 11:02:55Z

5

Angular dependency injection system should know which type has been passed to constructor. When you inherit component such way typescript won't keep information about parameter private injector. You have two options:

1) Duplicate initializing

@Component({
  ...
})
export class InputTextComponent  extends AbstractFormControl{
    constructor(injector: Injector) { super(injector);}
}

But in your case you have the same number of parameters in your base and inherited classes and this solution seems redundant because we can omit constructor in our derived class.

We can omit constructor in derived class if we want to only use dependencies from parent class. So let's say we have parent class like:

abstract class Parent {
  constructor(private a: string, private b: number) {}
}

we can extend this class either

class Foo extends Parent {
  constructor(a: string, b: number) {
    super(a, b);
  }
}

or

class Foo extends Parent {
}

because the second option will generate code like

function Foo() {
   return _super !== null && _super.apply(this, arguments) || this;
}

Plunker Example

2) Use @Injectable for base class.

@Injectable()
export class AbstractFormControl {

this way typescript will translate the code above into

AbstractFormControl = __decorate([
    core_1.Injectable(),
    __metadata("design:paramtypes", [core_1.Injector])
], AbstractFormControl);

Plunker Example

and angular reflector can easily read this information

3) Use @Inject() for each of parameters

export class AbstractFormControl implements OnInit {
  constructor(@Inject(Injector) private injector: Injector) { }

edited Aug 21, 2017 at 11:02

answered Aug 21, 2017 at 10:27

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pablo Lozano Over a year ago

I have components and services which have a base abstract parent and the @Injectable decorator was not needed to make them work

yurzui Over a year ago

@PabloLozano You can start with it plnkr.co/edit/PkRlXv2cAakibpZI70sm?p=preview

Pablo Lozano Over a year ago

I think you're right, I did not use Injectable in my parent service but I used Inject in the children, I did not remember that: plnkr.co/edit/PkRlXv2cAakibpZI70sm?p=preview . I'm gonna delete my answer because yours is more complete :)

Collectives™ on Stack Overflow

Inheritance in Angular 2 components

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related