Imagine you are working with a typescript file similar to the one below:
@Component({
selector: 'app-product-alerts',
templateUrl: './product-alerts.component.html',
styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent {
//code ...
//code (imagine multiple methods) that can be isolated from the rest
calculatesAge(){
this.age ...
}
checkIdPermission() {
this.permission ...
}
//
}
You want to extract these methods into a separate class. However, the new class needs to inherit properties from ProductAlertsComponent. To achieve this, you create a separate file and implement the logic as follows:
//Separate file:
import {ProductAlertsComponent} from ".product-alerts.component.ts"
export class UserOperations extends ProductAlertsComponent {
calculatesAge(){
this.age ...
}
checkIdPermission() {
this.permission ...
}
}
The issue is that the template angular file (product-alerts.component.html) does not recognize calculatesAge() and checkIdPermission(). How can this problem be solved? Having a single class with numerous methods in ProductAlertsComponent is not sustainable in the long run. Is there a way to connect the extended class with the angular template file?