8

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?

Milad
  • 27,506
  • 11
  • 76
  • 85
  • Which version of Angular 2 are you using? Component inheritance is available with Angular 2.3 – RK_Aus Apr 13 '17 at 06:11

1 Answers1

-1

You can use decorators for that, You can look into the below jsfiddle example

Overriding components

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

mohan rathour
  • 420
  • 2
  • 12