Пользовательский угловой мод не обновляет входную переменную при втором нажатии

Question

Модальная входная переменная не обновляется при нажатии во второй раз, Модальная отображает входную переменную только в первый раз

Это ts-файл модального

import { Component, Input, OnInit } from '@angular/core';
import { trigger, style, transition, animate, state } from '@angular/animations';
import { ConfirmDialogService } from '../confirm-dialog.service';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss'],
  animations: [
    trigger('Fading', [
      state('void', style({ opacity: 0 })),
      state('*', style({ opacity: 1 })),
      transition(':enter', animate('800ms ease-out')),
      transition(':leave', animate('100ms ease-in')),
    ])
  ]
})
export class ConfirmDialogComponent implements OnInit {
  message: any;
  formatedText: any;
  @Input() title: string;
  @Input() msg: string;
  @Input() buttonValue: string;
  @Input() buttonType: string;
  @Input() modalType: string;
  @Input() highlightedtext: any;

  constructor(
      private confirmDialogService: ConfirmDialogService
  ) { }

  ngOnInit() {
      // this function waits for a message from alert service, it gets
      // triggered when we call this from any other
      this.formatedText = this.makeBold(this.msg, this.highlightedtext);
      this.confirmDialogService.getMessage().subscribe(message => {
          this.message = message;
      });
  }

  makeBold(input, wordsToBold) {
    if (input) {
      return input.replace(new RegExp('(\\b)(' + wordsToBold.join('|') + ')(\\b)', 'ig'), '$1<b>$2</b>$3');
    }
  }

}

Этоэто файл служб, который генерирует событие, используя Rxjs subjectReplay

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ReplaySubject  } from 'rxjs';


@Injectable({
    providedIn: 'root'
  })


export class ConfirmDialogService {
    private subject$ = new ReplaySubject <any>();
    // Default width and height

    constructor() { }

    confirm(del, cancel, inputContent) {
      this.setConfirmation( del, cancel, inputContent);
    }

    setConfirmation( onDelete: () => void, onCancel: () => void, inputContent) {
        const that = this;

        this.subject$.next({
            type: 'confirm',
            param: inputContent,
            onDelete:
                function () {
                    that.subject$.next(); // this will close the modal
                    onDelete();
                },
            onCancel: function () {
                that.subject$.next();
                onCancel();
            }
        });
    }

    getMessage(): Observable<any> {
        return this.subject$.asObservable();
    }

}

Это файл модального представления

<div *ngIf="message" class="modal" tabindex="-1" role="dialog" [@Fading] (click)="message.onCancel()">
    <div class="modal-dialog custom-alert" id="model-style" role="document">
        <div class="modal-content modal-body" (click)="$event.stopPropagation()">
            <div *ngIf="modalType == 'delete-user'">
                <div class="header">
                    <span class="header-text">{{title}}</span>
                    <span class="close-btn"> <i (click)="message.onCancel()" class="icon-close input-icon ng-star-inserted"></i></span>
                </div>

                <div class="modal-content-body">
                    <div class="row">

                        <div class="col-md-12 content-message">
                            <!-- <p>{{message.text}}</p> -->
                            <div class="msg">
                              <div class="msg" [innerHTML]="formatedText"></div>
                            </div>

                            <div class="row action-row">
                                <div class="action-btn pull-right">
                                <button (click)="message.onDelete()"
                                [ngClass]="{'btn-32_default': buttonType == 'default',
                                            'btn-32_blue': buttonType == 'blue',
                                            'btn-32_lightBlue': buttonType == 'lightBlue',
                                            'btn-32_green': buttonType == 'green',
                                            'btn-32_red': buttonType == 'red'}"
                                >{{ buttonValue }} </button>
                                <button (click)="message.onCancel()" class="btn-32_default btn-space pointer">Cancel</button>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Этот модальный файл включен в app.component.html один раз в приложении

<app-confirm-dialog *ngIf="isModel"
  [modalType]= "modalInput.modelType"
  [buttonValue]= "modalInput.btnValue"
  [title]="modalInput.popoverTitle"
  [msg]="modalInput.popoverMessage"
  [highlightedtext]="modalInput.highlightedtext"
  [buttonType]= "modalInput.buttonType">
</app-confirm-dialog>

Здесь модал запускается из app.components.ts

constructor(
    private router: Router, private confirmDialogService: ConfirmDialogService,
    private authenticationService: AuthenticationService
  ) {
    this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
    this.callDialog();
  }

  callDialog() {
    this.isModel = false;
    this.confirmDialogService.getMessage().subscribe( value => {
      if (value) {
        this.isModel = true;
        this.modalInput = value.param;
        console.log(value);
      }
    });
  }

Это компонент, который модал используется в IndividualProfileComponent, где я имеюпроблема переменная this.selectedNodeLength не обновляется

export class IndividualProfileComponent implements OnInit {

constructor(
  private confirmDialogService: ConfirmDialogService,
  private route: ActivatedRoute){
 }

public btnValue = 'Clear Values';
public popoverMessage = `This will clear the values of `+ this.selectedNodeLength + ` attributes.These values will still be in the attribute's version history.`;
public popoverTitle = `You're about to clear multiple attributes`;
public modelType = `delete-user`;
public buttonType = `red`;
public highlightedtext = ['This will clear the values of ', this.selectedNodeLength + ' attributes', ' will still be in the attribute'];
     public test: any;
     verSet: boolean;

     onDeleteCallback() {
         // Add delete method
         console.log('File deleted');
         this.clearSelectedAttributes();
       }

       onCancelCallback() {
          // Add cancel method
        }

 onDelete() {
        this.popoverMessage = `This will clear the values of this.selectedNodes.length + ` attributes.
        These values will still be in the attribute's version history.`;
        this.highlightedtext = ['This will clear the values of ',  this.selectedNodes.length + ' attributes', ' will still be in the attribute'];


         const inputParams = {
           btnValue: this.btnValue,
           popoverMessage: this.popoverMessage,
           popoverTitle: this.popoverTitle,
           modelType: this.modelType,
           buttonType: this.buttonType,
           highlightedtext: this.highlightedtext
         };


         this.confirmDialogService.confirm (
            // Code on this block is executed on click delete button
           this.onDeleteCallback.bind(this),
            // Code on this block is executed on click cancel button
           this.onCancelCallback.bind(this),
           // Inputed content
           inputParams
         );
       }