Angular 4 : If there are multiple components with same selector, how to load only one component based on some condition?

Question

Main component:

@Component({
    selector: 'app-root',
    template: '<app-report></app-report>'
})

Component 1:

@Component({
    selector: 'app-report',
    templateUrl: './trip.report.html'
})

Component2 :

@Component({
    selector: 'app-report',
    templateUrl: './user.report.html'
})

Is there any way in angular 4, through which based on some condition which component (component 1 or 2) will be loaded in "main component" based on some condition?

Answer 1

There is no way to do that. Selectors need to be unique for all components and directives declared within and imported into a single NgModule.

If you own the code, just don't create conflicting selectors.

If imported 3rd-party modules have components with conflicting selectors,
you can wrap a conflicting component in another component with a non-conflicting selector and add it to it's own module. Then you can specify in @NgModule({imports: [...]}) which component should be used.

Then you can just use *ngIf

<conflicting-component *ngIf="foo"></conflicting-component>
<de-conflicted-wrapper *ngIf="!foo"></de-conflicted-wrapper>