Angular 2 call super method from html

Question

I've successfully achieved to inherit a class. I would like to call super method from template but right now what I'm getting is Cannot read property 'presentModal' of undefined :

@Component({})
class Dia {
    constructor(public modalCtrl: ModalController) {
    }

    presentModal() {
        const detailModal = this.modalCtrl.create(AgendaDetails, { showDetails: 8675309 });
        detailModal.present();
    }
}

@Component({
    templateUrl: 'dimarts-tab.html',
})
export class Dimarts extends Dia { }

and in template:

<ion-item text-wrap (click)="super.presentModal()">

I've also tried with $super, $parent with no success. The only working solution at this moment is to create the method in Dimarts and call super there.

Any ideas?

Answer 1

super is ES6 syntax that cannot be used outside the method where it's used. Given there is Foo class that extends Bar , super keyword is interpreted as Bar in Foo constructor and static methods and as Bar.prototype in instance methods.

class Foo extends Bar {
  foo() {
    super.foo()
  }
}

will be transpiled to

var Foo = /** @class */ (function (_super) {
    __extends(Foo, _super);
    function Foo() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Foo.prototype.foo = function () {
        _super.prototype.foo.call(this);
    };
    return Foo;
}(Bar));

The attempt to use super.presentModal() in template defies the purpose of class inheritance and prototype chains.

Unless presentModal is defined in child class, it is inherited from parent class. It should be:

<ion-item text-wrap (click)="presentModal()">