I have 2 file services (data-parent.service.ts, data-child.service.ts). Both have a() function names. data-child.service.ts extends data-child.service.ts. 

app-root.component.ts

```
@Component({
    selector: 'app-root',
    templateUrl: './app-root.component.html',
    styleUrls: ['./app-root.component.scss']
})
export class AppRoot extends DataParent{
    clicka = () => {
        console.log('click a');
        this.a();
   }
}

```

data-parent.service.ts

```
@Injectable()
export class DataParent{
    a(): void {
        console.log('a DataParent');
    }
}

```

data-child.service.ts

```
@Injectable()
export class DataChild extends DataParent {
   a = () => {
      console.log('a DataChild');
      super.a();
   }
}

```

How to do this when the app-root component calls function name a () of data-child.service.ts, the function a () of data-child.service.ts executes.

Result: "click a"
"a DataChild"
"a DataParent"