Refresh NgxSpinner text while spinning

Question

i have a spinner my project has been using for a while but i want to be able to update the text of the spinner component while it is displaying and i have had problems doing that. it only updates at the end (just before the spinner goes away) though i call to set (update) the message many times while spinning.

i work on an intranet site so i can't easily post code plus my company is weird about posting code. whatever! so i will give a quick rendition of the component we have and hopefully that is enough to go on. if not, i will update as needed.

i'd like the message to go from something like 'Loading data' to something like 'Processing data' while the spinner is up without disturbing anything about the spinner other than the text it displays.

we have the one spinner for the app and a service that shows and hides it as needed. everything is working out fine other than the text change while it is spinning. i cleaned up the spinner a bit and no NG0100 errors but it just won't update until the very end no matter when or how many times the set message is called.

@Component( {
    selector: 'app-spinner',
    template: '<ngx-spinner [zIndex]='1020' [type]="type" [name]="name">' +
        '<div class="spinner-message">' +
        '<p>{{message}}</p>' +
        '<p>{{subMessage}}</p>' +
        '</div>' +
        '</ngx-spinner>'
});

export class SpinnerComponent extends NgxSpinnerComponent {
    @HostBinding( 'style.font-size') fontSize = '20px';
    @HostBinding( 'style.color') fontColor = 'white';

    message: string;
    subMessage: string;
    @Input name: string;

    spinners = ['pacman', 'line-scale',...];

    constructor (
        private service: NgxSpinnerService,
        private cdr: ChangeDetectorRef
    ) {
        super(service, cdr);
        this.updateSpinnerType();
    }        

    private updateSpinnerType () {
        const choice = Math.floor( Match.random() * this.spinners.length );
        this.type = this.spinners[ choice ];
    }

    public setSpinnerMessages (message: string, subMessage: string) {
        this.message = message;
        this.subMessage = subMessage;
        this.cdr.dectectChanges();
        this.updateSpinnerType();
    }

    public setSpinnerMessage (message: string) {
        this.message = message;
        this.cdr.dectectChanges();
        this.updateSpinnerType();
    }

    public setSpinnerSubMessage (subMessage: string) {
        this.subMessage = subMessage;
        this.cdr.dectectChanges();
    }
}