Choose between 2 Angular components on the module-CodePudding

I have an Angular project used by some clients. So, every time I build the project I do it for one client, changing a property on a configuration file. Also, I may have slightly different logic on some components for different clients. For instance:

@Component({
  selector: 'my-component',
  templateUrl: './component.template.html',
  styleUrl: './component.styles.scss'
})
export class MyBaseComponent {
  getName() {
    return 'Base';
  }

  /* Other logic here ... */
}

@Component({
  selector: 'my-component',
  templateUrl: './component.template.html',
  styleUrl: './component.styles.scss'
})
export class MyClientComponent extends MyBaseComponent {
  getName() {
    return 'Client';
  }
} 

@Component({
  selector: 'my-component',
  templateUrl: './component.template.html',
  styleUrl: './component.other-client.styles.scss'
})
export class MyOtherClientComponent extends MyBaseComponent {
  getName() {
    return 'Other Client';
  }
}

Now, what I would like is for this to be totally transparent for other modules that import this components. Note that all three selectors are named the same. I tried to implement the module like this:

import { client } from '../environment';
import { MyBaseComponent, MyClientComponent, MyOtherClientComponent } from './components';

function chooseComponent() {
  switch(client) {
    case 'my-client':
      return MyClientComponent;
    case 'my-other-client':
      return MyOtherClientComponent;
    default:
      return MyBaseComponent;
  }
}

@NgModule({
  declarations: [chooseComponent()],
  imports: [],
  providers: [],
  exports: [chooseComponent()],
})
export class TestComponentModule {}

But Angular does not let me do this. Do you guys know what's the correct way to implement this. Sure, I could use and if to change the logic. But that's ugly.

Also, if I would like to change a piece of the html template, based on the client. What would be the best to do it? Imagine, if client is X I show a button, and if its Y I show label. Is using ngIf the only way?

Thanks!

CodePudding user response：

There are several ways to do this. 1- you could create a container component and use ngSwitch in the template. In this case you would need to use a unique selector for each component and use it in the container component template: e.g.

Container Template

<ng-container [ngSwitch]="client">
  <my-client-component *ngSwitchCase="'my-client'"></my-client-component>
  <my-other-client-component *ngSwitchCase="'my-other-client'"></my-other-client-component>
</ng-container>

2- You could use dynamic rendering and do the magic in your container component typescript file. You could define a method with switch on client variable and let angular render the component in the view based on the client. For more details about how to render a dynamic component see the