Angular: Using generic component inside a component

Question

I am using nrwl/nx. My project has 2 angular applications and 1 library. Inside this library, there are 1 component and 2 services. Both apps use the same component but with a different service.

How can I use the same component but with a different service?

The services have the same property keys, but not the same functionalities.

I was thinking about declaring a generic component like this post on StackOverflow: Declare a component with generic type I tried this. Here is the code:

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'cms-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
})
export class BaseLoginComponent<T> implements OnInit {
   constructor(private loginService: T) { }

   ngOnInit(): void {
      this.loginService.getUser(); // tells property 'getUser()' does not exist in 'T'
   }
}

Here is the code from my services

@Injectable({
  providedIn: LoginModule
})
export class LoginService {
  private currentUserSubject: BehaviorSubject<UserEntity>;
  public currentUser: Observable<UserEntity>;

  public currentUserValue(): UserEntity {
    // different code
    return { id: 1, username: '' }
  }

  login(): Observable<any> {
    // different code
    return of(null);
  }

  logout() { }
}

I also was thinking about doing something with Dependency Injections, but I don't know how to implement it.

@BunyaminCoskuner They share the same property keys, but they don't have the same functionalities. One services authorize users via google auth and the other one sends an http request to my backend server — Mike Ziegler
– Mike Ziegler, Commented Apr 30, 2020 at 6:55
Alright, so both of them try to login the user via different calls. So they have one function in common. One more question, where should you put these services? In the library or the applications? — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Apr 30, 2020 at 7:00

Radik · Accepted Answer · 2020-04-29 23:33:09Z

1

You can try as follow

In library

provide token

export const TOKEN_API = new InjectionToken('api');
provide interface

interface IServiceInterface { }
in component inject service by token

@Component({})
export class MyComponent {
  constructor(@Inject(TOKEN_API) private api: IServiceInterface) {
  }
}

In application you can provide dedicate service for injection token

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: TOKEN_API, useClass: MyServiceImplementation}
  ],
  bootstrap: [AppComponent]
})

//dedicate service
export class MyServiceImplementation implements IServiceInterface {
}

edited Apr 29, 2020 at 23:33

answered Apr 29, 2020 at 23:24

Radik

2,7931 gold badge23 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angular: Using generic component inside a component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related