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

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?