How to override a variable in subclasses? (not a method)

Question

In my.component.html I have:

<div class="my-label" *ngIf="isMyProperty()">

In myParent.class.ts (abstract class MyParent) I have:

// overridden in derived classes
abstract isMyPropoerty(): boolean;

In myChild.class.ts (export class MyChild extends MyParent) I have:

// derived method, return true
isMyProperty(): boolean {return true; }

Now this works "fine", but for every mouse move event in the browser, isMyProperty() is called, so I need to replace it with a variable, so that I have in my.component.html variable instead of the method call:

<div class="my-label" *ngIf="isMyProperty">

Additionally, isMyProperty needs to be accessible also in the classes that use:

@ViewChild(MyChild) myChild: MyChild;

I am sorry that I was not able to explain problem better.

the must be the same type , this the only restriction and you cant change a method to a property — Muhammed Albarmavi, Aug 19 '19 at 12:23

score 1 · Accepted Answer · edited Aug 19 '19 at 12:53

1

simply you just need to declare it

class Base { 

  value() : boolean { 
    return true;
  }
}

class B extends Base { 

  value() : boolean { 
    return false;
  }

  get newValue() {
   return this.value()
  }

}

but they need to be the same signature; meaning same parameter and return type in case of method; in case of property the same type.

edited Aug 19 '19 at 12:53

Heretic Monkey

11,687
7
53
122

answered Aug 19 '19 at 12:20

Muhammed Albarmavi

23,240
8
66
91

Yes, I already did that, but like I said it is causing browser to call "value()" too many times, because I am using "value()" in my html:
so I need to replace function "value()" with variable "value", which browser read only once instead of invoking it al the time :)
– Dani Che Aug 19 '19 at 12:24
you can create a property and set the value base of the method `value1 = getValue()` just same the value of return method on a variable – Muhammed Albarmavi Aug 19 '19 at 12:26
This is just Angular change detection at work calling `loadProperty(i,element) `over and over in each change detection cycle ,calling methods from the template is discouraged because they are called very often. You should instead store the result in a property and bind to this property instead. – Muhammed Albarmavi Aug 19 '19 at 12:35
@MilanChe check this https://stackoverflow.com/questions/37876533/ngfor-running-an-infinite-loop-in-angular2 – Muhammed Albarmavi Aug 19 '19 at 12:36
then angular would be constantly reading a field instead of constantly calling a method. not sure if it will improve performance greatly. – aycanadal Aug 19 '19 at 12:43
pipe can be another way in case of performance https://blog.angularindepth.com/tiny-angular-pipe-to-make-any-function-memoizable-f6c8fa917f2f – Muhammed Albarmavi Aug 19 '19 at 12:50

How to override a variable in subclasses? (not a method)

1 Answers1