Как сделать угловой настраиваемый модальный компонент глобальным, чтобы использовать его везде?

Question

Я работаю над проектом angular7. Существует модальный компонент входа, который я хочу, чтобы он отображался по-разному на экранах компьютеров и мобильных устройств. Я использовал BreackPointObserver из @angular/cdk/layout для этой цели.

Следующий код работает отлично:

ngOnInit() {

    this._breakpointObserver.observe([Breakpoints.XSmall, 
    Breakpoints.Small]).subscribe(value => {
        if (value.matches) {
            this.mobileLayout= true;
        } else {
            this.mobileLayout= false;
        }
    });
}



 openUserRegistrationModal(): void { 
        if(this.mobileLayout){
            const dialogRef = this.modal.open(UserRegistrationModalComponent, {
                width: '500px',
            });
        } else {
            const dialogRef = this.modal.open(UserRegistrationModalComponent, {
                width: 90%,
            });
        }
}  

Я использую этот код в своем компоненте navbar. Но мне это нужно в comment component, like component и ...

Теперь вопрос заключается в том, должен ли я повторять этот код в каждом компоненте, который мне нужен? Как я могу сделать его глобальным Service/Component, чтобы использовать его легко и без повторения кода?