Override components like services?

Question

Let's say we import one of the Angular material modules:

 providers:[],
 imports : [MaterialInput]

Internally MaterialInput, a component called: MaterialInputComponent is used

For some reason I want to override this component with my own

So I want to say:

 providers:[
    {
       provide: MaterialInputComponent,
       useClass : MyOwnInputComponent
    }
 ],
 imports : [MaterialInputModule]

I know that we can redefine such services, but can this also be done for components or directives?

UPDATE : I am not looking for Component inheritance, I want to use something like Material Module, but sometimes I want to redefine some of its component behavior, for example, using services.

Like:

If this is the source code of the MaterialInput component that is in my node module.

  @Component({})
  export class OriginalMaterialInputComonent{
        greet(){ alert('Say Aloo'); }
  }

And I have a similar class:

  @Component({})
  export class OverrideMaterialInputComonent{

        greet(){ alert('Say yes we can'); } // overriden function
  }

And let's say I import a MaterialInputModule hole

declarations:[
   {
    provide: OriginalMaterialInputComonent,
    useClass : OverrideMaterialInputComonent
  }
],
  imports : [MaterialInputModule]

Is this doable?

Answer 1

. jsfiddle

Overriding components

https://jsfiddle.net/mohan_rathour/sqv0jx21/