Угловой Материал - Используйте Индикатор Прогресса внутри Закусочной

Question

Я хочу добавить индикатор выполнения углового материала внутри моей угловой закусочной.Смысл индикатора выполнения - это обратный отсчет, поэтому если снэк-бар открыт в течение 5 секунд, то в течение 5 секунд индикатор выполнения переключается со 100 -> 0 или что-то подобное.

Тем не менее, у меня возникли некоторые проблемы с изменением прогресса.Код ниже - это то, что у меня есть в моей закусочной.По сути, каждые x секунд я увеличиваю значение индикатора выполнения.Это нормально работает в обычном компоненте, но в снэк-баре значение прогресса останавливается сразу после его запуска.

export class PizzaPartyComponent implements OnInit{
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
  intervalSubscription;
  countdown: number = 0;
  ngOnInit(){
    const source = interval(100);

    this.intervalSubscription = source.subscribe(val => {
        this.countdown += 1;
        console.log("Interval", val, " - ", this.countdown)
    });
  }

  ngOnDestroy(): void {
    console.log("Snackbar Destoryed")
    this.intervalSubscription.unsubscribe();
  }
}

Консоль читает

Интервал 0 - 1

Интервал 0 - 2

Интервал 0 - 3

Интервал 0 - 4

Интервал 0 - 5

И так до снэк-барауничтожается (закусочная закрывается около 0-30).

countdown в коде обновляется нормально, однако значение индикатора выполнения рано застревает.Если countdown отображается на экране, оно изменяется от 0 до 2 и не обновляется после этого. Он всегда выполняет 2 цикла интервала. Единственное, о чем я могу думать, это после того, как ngOnInit() завершается, затем обнаружение изменений для countdown останавливается.