How to Override a Component from a 3rd Party Library in Angular?

Question

I'm using an internal library that provides a generic solution for authentication, including a login page with a login form. For a specific application, I need to customize the login form by adding additional functionality and changing the layout (HTML).

Is it possible to override the login form component provided by the library without creating a completely new custom login page?

Here is what I have tried so far:

@Component({
  //same selector
  selector: 'login-form',
  templateUrl: './custom-login.component.html',
  styleUrls: ['./custom-login.component.scss'],
  providers: [
    {
      provide: LoginComponent,
      useExisting: CustomLoginComponent,
    },
  ],
})
export class CustomLoginComponent extends LoginComponent {}

However, this approach doesn't seem to work as expected. The original login form from the library is still being displayed instead of my custom form.

Questions:

Is it possible to override a component from a 3rd party library in Angular by extending it and using the same selector? If so, what is the correct way to achieve this? Are there any alternative methods to customize a component from a 3rd party library without creating a completely new component?

is the login-form selector used in your application, or inside the 3rd party library. — Naren Murali
– Naren Murali, Commented Jul 22, 2024 at 12:30

Matthieu Riegler · Accepted Answer · 2024-07-22 12:56:34Z

1

No you can't replace a component provided and used inside the library in a runtime app.

This is only possible in testing scenarios to enable stub components.

answered Jul 22, 2024 at 12:56

Matthieu Riegler

59.9k27 gold badges158 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JanMod Over a year ago

This means that the third party should provide a solution for this, right? The only think which comes into my mind is using a template which you can register using forRoot but this doesn'T allow adding new functionalities to an existing component.

Matthieu Riegler Over a year ago

Yes, most likely via TemplateOutlet or a ComponentOutlet

Collectives™ on Stack Overflow

How to Override a Component from a 3rd Party Library in Angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related