Erro ExpressionChangedAfterItHasBeenCheckedError na barra de loading

Saudações pessoal, tudo bem?

Implementei o loading bar, ensinado no modulo 3 do curso de Angular parte 4, em um projeto da empresa em que trabalho. Está tudo funcionando normal, porém ao abrir o console da pagina em que inseri o componente é exibido o seguinte erro:

core.js:6006 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'stopped'. Current value: 'loading'.
    at throwErrorIfNoChangesMode (core.js:6539)
    at bindingUpdated (core.js:12626)
    at Module.ɵɵproperty (core.js:14441)
    at LoadingComponent_Template (loading.component.html:1)
    at executeTemplate (core.js:9302)
    at refreshView (core.js:9171)
    at refreshComponent (core.js:10324)
    at refreshChildComponents (core.js:8968)
    at refreshView (core.js:9221)
    at refreshComponent (core.js:10324)

Dei uma pesquisada no erro e vi que é algo comum, apresentado apenas em ambiente de desenvolvimento principalmente com a utilização do método "afterViewInit", o que não é meu caso.

Alguém sabe o motivo desse erro e como resolve-lo? Desde já agradeço.

Meu componente:

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { LoadingService } from "./loading.service";

@Component({
    selector: 'app-loading',
    templateUrl: './loading.component.html',
    styleUrls: ['loading.component.css']
})
export class LoadingComponent implements OnInit {

    loading$: Observable<string>;

    constructor(private loadingService:LoadingService){}; 

    ngOnInit(): void {

       this.loading$ = this.loadingService
                                .getLoading()
                                .pipe(map(loadingType => loadingType.valueOf()));

    }

}

O template:

<hr class="{{loading$ | async}}">