The configuration for the Angular application includes the following routes:
componentRoutes: Routes = [
{path: 'child',
canActivate: [guardService],
component: ParentComponent,
children: [
{path: '', component: nestedChildComponent1},
{path: ':id', children: [
{path: 'child2', component: nestedChildComponent2},
{path: 'child3', component: nestedChildComponent3},
]},
]
},
];
The structure of the Parent component is as follows:
@component({
template: <div>
<H3> This is Parent Component </H3>
<button id='button' (click)="buttonClickedHandler()"> click me </button>
</div>
<router-outlet></router-outlet> <--- nested child components go here
})
export class ParentComponent implements OnInit, OnDestroy {
...
}
In ParentComponent, the button is a common feature shared among all the nested routes. Each nested child component must provide its own implementation for the buttonclickedHandler. What would be the best approach for this? Should the nested components extend ParentComponent or should they implement an interface that defines an abstract API for the buttonclickedHandler?
I came across resources like abstract method in typescript and creating interfaces for angular services posts while trying to find a solution, but I am still unsure about how to proceed with my problem.