Renderer2 not working while inheritance in angular7

Question

I need to access dom element and manipulate in other class
homeComponent.ts

   import{TableUtility} from "src/shared/table-utility"; 
   export class HomeComponent extends TableUtility{
   constructor(){super()}

homeComponent.html

<button (click)="toggleClass($event)"><img src="img.png"></button>

tableUtility.ts

import{Table} from "primeng/table";
import{Renderer2} from "@angular/core";

export class TableUtility{
constructor(public render:Renderer2)
togglClass(ev){
console.log(this.render.addClass(ev.target,"active");
}

Err:cannot read addClass of undefined

If I use it within home component I can read Renderer2. Can someone tell this with proper reason and how to solve this.

Julius Dzidzevičius · Accepted Answer · 2019-11-07 06:25:07Z

2

You need to define dependencies in subclass constructor and pass them to superclass via super():

export class HomeComponent extends TableUtility{
constructor(public render:Renderer2){super(render)}

answered Nov 7, 2019 at 6:25

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

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

2 Comments

pjay Over a year ago

Yeah got it thanks jsbin. Can you explain little bit more about this?

Julius Dzidzevičius Over a year ago

Your supper class has dependencies declared in its constructor - renderer. When you extend subclass with it, you are able to use all methods of superclass, but they relay on dependencies superclass declares, so it makes sense to require subclass to have those dependencies as well and pass them to superclass via super() method. Also, you could pass different dependency from subclass, if types matches, f.ex Renderer3 (just an example to illustrate. Not necessarily would work)

Collectives™ on Stack Overflow

Renderer2 not working while inheritance in angular7

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related