Set tab active from page component to modal component Angular2

I am trying to set the modal tab to edit the content active based on what tab is active from the page tab component. I am using sharedServices and for some reason I am only getting a value after opening the second time its like the ngOnInit doesn't do anything on the first open but even after the 2nd the value is not getting into the modal component as expected.

Notary Signature HTML

<ul class="nav nav-tabs">
    <li>
         <a class="nav-link active" data-toggle="tab" data-target="#ackTab" (click)="setValue('Acknowledgement')"> Acknowledgement </a>
     </li>
     <li>
         <a class="nav-link m-0" data-toggle="tab" data-target="#juratTab" (click)="setValue('Jurat')"> Jurat </a>
     </li>

button to click to open Notary Signature Modal Edit Modal

<span>
 <i class="m-2 fas fa-pencil-alt" containerclass="customClass" [ngClass]="editNotaryClass()" (click)="editAcknowledgement(acknowledgementTemplate)"

[tooltip]="templateedit" placement="top">

Notary Signature TS

editAcknowledgement(acknowledgementTemplate) {
    if (!((this.notaryAckData || this.notaryJurData) && this.signatoryInfoForm && (this.block_text[this.notaryAckData.key] || this.block_text[this.notaryJurData.key]))) {
      return
    }
    this.updateLabel('Edit', 'Notary Acknowledgement');
    this.editNotray('NOT_ACK');
    this.isEdit = true;
  }

  editJurat(acknowledgementTemplate) {
    this.updateLabel('Edit', 'Jurat');
    this.editNotray('NOT_JUR');
    this.isEdit = true;
  }

updateLabel(addEditLabel, contentLabel) {
    this.acknowledgementDate = '';
    this.acknowledgementBy = '';
    this.field3 = '';
    this.signatory.boilerplate = '';
    this.addEditLabel = addEditLabel;
    this.contentLabel = contentLabel;
  }

setValue(tab: string){
    this.sharedService.tabDetection(tab);
 }

Notary Signature Modal Edit TS

ngOnInit() {
    this.signatoryName = this.signatory.selectedSignature.titled_name;
    this.signatureTreeHistory = {
      past: [],
      present: JSON.parse(JSON.stringify(this.signatory.signatures)),
      future: []
    };
    debugger;
    this.sharedService.activeTab$.subscribe(
      (activeTab) => {
        debugger;
        this.getActiveClass = activeTab;
        alert(this.getActiveClass);
      }
    );
  }

Notary Signature Modal Edit HTML

<ul class="nav nav-tabs">
                        <li><a class="nav-link active" data-toggle="tab" data-target="#ackAddTab" ng-class="getActiveClass === 'Acknowledgement' ? 'active' : ''">Acknowledgement</a>
                        </li>
                        <li><a class="nav-link" data-toggle="tab" data-target="#juratAddTab" ng-class="getActiveClass === 'Jurat' ? 'active' : ''">Jurat</a></li>
                    </ul>

SharedServices

/**

• Set Active tab for edit notary modal */

  private activeTab = new Subject(); public activeTab$ = this.activeTab.asObservable();

  tabDetection(t: any) { debugger; this.activeTab.next(t); }