CODEWITHSUNDEEP
angularangular-componentsangular-libraryangular-moduleangular15
JanMod
JanMod

Reputation: 446

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

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?

Upvotes: 1

Views: 98

Answers (1)

Matthieu Riegler
Matthieu Riegler

Reputation: 55514

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.

Upvotes: 1

Related Questions