Using Angular 2 to invoke the super method from an HTML file

Question

Using Angular 2 to invoke the super method from an HTML file

After successfully inheriting a class, I am facing an issue in calling the super method from the template. The error message that I currently receive 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 { }

The template code looks like this:

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

I have also tried using $super and $parent but without any success. Currently, the only solution that works is to create the method in Dimarts and then call super from there.

Any suggestions on how to resolve this issue?

angular typescript angular2-template

Answer 1

Answer №1

super is a feature of ES6 syntax that is limited to the method where it is used. When a class Foo extends another class Bar, the keyword super refers to Bar in the constructor and static methods of Foo, and Bar.prototype in instance methods.

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

This code will be transpiled as:

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));

Using super.presentModal() in a template goes against the idea of class inheritance and prototype chains.

If presentModal is not defined in the child class, it should be inherited from the parent class like this:

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

Answer 2

super is a feature of ES6 syntax that is limited to the method where it is used. When a class Foo extends another class Bar, the keyword super refers to Bar in the constructor and static methods of Foo, and Bar.prototype in instance methods.

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

This code will be transpiled as:

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));

Using super.presentModal() in a template goes against the idea of class inheritance and prototype chains.

If presentModal is not defined in the child class, it should be inherited from the parent class like this:

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

Using Angular 2 to invoke the super method from an HTML file

Answer №1

Similar questions

Obtain data based on the type of property

Develop a routing system for a complex Angular application with multiple modules

Avoiding DOM replacement when using ngFor asynchronously with AngularFire2 in Angular 2

problem with angular navigation bar

Customizing the choices for an ActionSheet on Ionic 2 on the fly

Encountering "Runtime Compiler Not Loaded" Error in Angular 8

Dealing with CORS and multiple headers

There was an issue with the computed property: "Parsing error - '}' was expected

Create a simulated API in Angular by utilizing JasonPlaceholder to retrieve information upon clicking a button

Intellisense for dispatch types in Redux Toolkit

What advantages does incorporating observables into Angular 5 HTTP requests offer?

Protractor experiencing difficulty recognizing Angular functionality

Active Class in Angular Dynamic Carousel

Is it possible for me to create a union type that connects parameters and responses in a cohesive manner

Synchronized scrolling and equal height for multiple divs

experiencing an excessive amount of re-renders after transferring data to a distinct component

Avoiding an endless spiral on a setter in JavaScript/TypeScript

Implementing Login using Google in a Nativescript iOS application: A step-by-step guide

Attempting to sort data with AngularJS

What is the correct way to implement async RedisJSON functions?