Как сделать footer в angular приложении с динамически изменяющимся содержимым?

Подскажите, пожалуйста, как сделать следующее:

Нужен компонент/директива/иное решение, которое можно будет использовать на разных страницах, и добавлять туда разное содержимое.

Допустим у нас есть компонент-футер:

<app-footer></app-footer>

Есть три страницы-компонента:

* <app-component-A>
* <app-component-B>
* <app-component-C>

Условно стуктура компонентов такая:

Главный маршрут и компонент А (/route_A):

<app-component-A>

  <router-outlet></router-outlet>

  <app-footer>
    <button>A</button>
  </app-footer>

</app-component-A>

Дочерний маршрут и компонент B (/route_A/route_B):

  <app-component-B>

    <app-footer>
      <button>B</button>
    </app-footer>

  </app-component-B>

В футере будут отрисованы кнопки А и В

Дочерний маршрут и компонент C (/route_A/route_C):

  <app-component-C>

    <app-footer>
      <button>C</button>
    </app-footer>

  </app-component-C>

В футере будут отрисованы кнопки А и С

Пример скорее коцептуальный!

Получается, на маршруте, где есть компонент A и компонент B будут присутствовать кнопки А и В.

А на маршруте, где есть компонент А и компонент С будут кнопки А и С соответственно.

Вопрос в том, как сделать такой комонент/директиву или что-то еще (условно app-footer), которая позволит подключать его в компонентов разных уровней, и выводить содержимое в зависимости от того какой компонент или компоненты отрендерелись?