Angular 2 Inheritance components

[shijilesh]

I have a basewindow.component which will be the base component for all my components. This basewindow.component will be having buttons like save, delete etc and while clicking "New" button I would like to call basewindow function ufbNew() after executing it should execute parent window function ufNew(). Please check my code and help me whether I'm doing it correctly. I'm able to call base function but child not

//basewindow.component///

import { Component } from '@angular/core';

@Component({ selector: 'basewindow', templateUrl: './Basewindow.component.html', styleUrls: ['./Basewindow.component.css'] }) export class BasewindowComponent {

/////////////////////// User Base Functions ///////////////////

ufbNew() {

   this.ufNew();
}
ufbSave() {
    this.ufSave();
}

/////////////////////// User Functions for parent ///////////////////

ufNew() {
  alert("I m In Base ufbNew")  
}
ufSave() {
}

}

//// Basewindow.component.html

        <button (click)="ufbNew()">New</button>
        <button (click)="ufbSave()">Save</button> 

/////////////////////////// AccountsCategory.Component (Parent 1) ////

import { Component } from '@angular/core'; import { BasewindowComponent } from '../base/basewindow.component';

@Component({ selector: 'app', templateUrl: './AccountsCategory.component.html' }) export class AccountsCategory extends BasewindowComponent {

/////////////////////// User Functions for parent /////////////////// ufNew() { alert("I m in Acounts category (parent)")
} ufSave() { } }

//////////// AccountsCategory.component.html /////////////

my purpose is to reuse base component objects , functions and override from child if requires. please see test application in plnkr

https://plnkr.co/edit/bVxt4GjNXwIg7pDbR4sE?p=preview

[holman]

I don't know Angular; sorry!