Inheritance with ViewChild Angular 8

Question

I'm trying to do inheritance with a class but if I use ViewChild I always get undefined. I'm going to show a simplification of my problem.

I have a parent class like this:

@Component({
  selector: 'parent',
  template: `<h1>Hello {{name}}!</h1> <p #pRef>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentComponent  {
  name: string;
  @ViewChild('pRef') public pRef: ElementRef;

  ngOnInit{
    console.log(this.pRef.nativeElement);
  }
}

And then, I have a child that I want to override name for example:

@Component({
  selector: 'child',
  templateUrl: '<div></div>',
  styleUrls: [ './app.component.css' ]
})
export class ChildCOmponent extends ParentComponent {

name = 'Juan';

}

As I said before, this is a simplification of my problem, but I get the same error that is:

ERROR Error: Cannot read property 'nativeElement' of undefined

I need to access to ViewChild in parent and in child I didn't need it but I get the error because in Child component pRef doesn't exists.

How could I use ViewChild and inheritance at same time?

Check this:https://stackoverflow.com/questions/42049792/how-to-access-viewchild-reference-defined-on-parent-component-angular-2 — Prashant Pimpale, Feb 18 '20 at 11:02
@PrashantPimpale yes, the problem is that I need to use inheritance not services and It's not problem of lifecycle. — SantiSori, Feb 18 '20 at 11:07
I could be wrong, but extending components seems unconventional. What are you trying to accomplish with that? — Adam Dunkerley, Feb 18 '20 at 13:39
@AdamDunkerley yes I now that is not tipical in Angular but I'm going to use the same component several times and I don't want to have multiple @ Input, I prefer inheritance. — SantiSori, Feb 18 '20 at 15:42
@julius-dzidzevičius and if i want to reference my ViewContainerRef in INHERITED class? Problem here, since decorators do not inherit... — Alexander, Nov 17 '20 at 17:05
you can use empty @Directive decorator https://angular.io/guide/migration-undecorated-classes — Chi, Nov 20 '20 at 02:00

score 1 · Answer 1 · answered Feb 11 '21 at 16:05

The problem is that html template is not inherited. Your child class has '' template and there is no #pRef in it On the other hand if you access it in a parent class you will get ElementRef.

Probably a good workaround would be to access the HTMLElement directly using document.getElementById As far as I know, Angular does not allow inheritance of HTML templates for components.

Inheritance with ViewChild Angular 8

1 Answers1