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?