Say we import one of Angular Material modules :
providers:[],
imports : [MaterialInput]
Inside MaterialInput , there is a component used named : MaterialInputComponent
For some reasons I want to override that component with my own
So I want to be able to say :
providers:[
{
provide: MaterialInputComponent,
useClass : MyOwnInputComponent
}
],
imports : [MaterialInputModule]
I know we can override services like that, but can it be done for components or directives as well ?
UPDATE :
I am not looking for Component inheritance, what I want is to use something like Material Module but sometimes I want to override some it's components behaviours, like you do with services.
Like :
If this is the original code behind MaterialInput component , which is in my node module.
@Component({})
export class OriginalMaterialInputComonent{
greet(){ alert('Say Aloo'); }
}
And I have a similar class like :
@Component({})
export class OverrideMaterialInputComonent{
greet(){ alert('Say yes we can'); } // overriden function
}
And, say I'm importing the hole MaterialInputModule
declarations:[
{
provide: OriginalMaterialInputComonent,
useClass : OverrideMaterialInputComonent
}
],
imports : [MaterialInputModule]
Is that doable?