Template binding and interpolation don't work in ngxBootstrap

Question

I have a modal with ngxBootstrap and inside it I need to enable and disable a button depending on the condition of a select option. The problem is that the variable does not change in the DOM. I see that it is initialized, but in any method I change this variable, it is not changed in the DOM, only in component.ts

Here is my html

historico.html:

<div class="container">
<div ps-row>
    <div ps-column ps-mobile="12" ps-tablet="2" ps-desktop-lg="12">

        <span class="btn-voltar">
            <mat-icon>keyboard_arrow_left</mat-icon><a [routerLink]="['/meus-negocios']" href="#">Voltar</a>
        </span>

    </div>
</div>
<div ps-row>
    <div ps-column ps-mobile="12" ps-tablet="2" ps-desktop-lg="12">
        <h3>Histórico de transmissão</h3>
    </div>
</div>
<hr />
<div ps-row>
    <div class="container-dados" ps-column ps-mobile="12" ps-tablet="2" ps-desktop-lg="12">
        <div class="linha-logo"></div>
        <div class="dados-apolice-header">
            <img alt="" src="../../../assets/icons/dados-do-segurado.svg" />
            <h4>Dados da apólice</h4>
        </div>
    </div>
</div>
<div class="row dados">
    <!--         <div class="col-md-5">
        <label>Código documento seguro</label>
        <p><strong>103447315</strong></p>
    </div> -->
    <div class="col-md-5">
        <label>Proposta do corretor</label>
        <p><strong>COL10J/496667</strong></p>
    </div>
    <div class="col-md-5">
        <label>Produto</label>
        <p><strong>Automóvel</strong></p>
    </div>
    <div class="col-md-5">
        <label>Proponente </label>
        <p><strong>QAR PORTO REA</strong></p>
    </div>
</div>

<div class="row dados" style="margin-top: 35px;">
    <div class="col-md-5">
        <label>Número da proposta Cia.</label>
        <p><strong>20-1057386</strong></p>
    </div>
    <div class="col-md-5">
        <label>Número da Apólice</label>
        <p><strong>1/3932569</strong></p>
    </div>
    <div class="col-md-5">
        <label>Número do registro</label>
        <p><strong>-</strong></p>
    </div>

</div>

<!-- TABELA-->
<div class="row" class="tabela">

    <app-tabela [tabs]="tabs" [displayedColumns]="displayedColumns" [dataSource]="dataSource"></app-tabela>
</div>

<div (click)="openModal()" class="row chat">
    <img alt="" src="../../../assets/icons/chat_icon.png" />
    <span>Chat</span>
</div>

historico.ts:

openModal() {
   this.modalRef = this.modalService.show(ChatModalComponent);
}

modal.component.ts:

import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
  selector: 'app-chat-modal',
  templateUrl: './chat-modal.component.html',
  styleUrls: ['./chat-modal.component.scss'],
})

export class ChatModalComponent implements OnInit {

isDisabled: boolean = false
valor

constructor(public bsModalRef: BsModalRef, private modalService: BsModalService) {
}

ngOnInit() {
    this.valor = 'teste'
}

onChange(value) {
    //this.isDisabled = true
    this.valor = 'abcd'
}

}

modal.component.html:

<mat-dialog-content>

<div class="header-modal" bsModal>
    <div class="logo">
        <img src="../../../../assets/icons/maos-icon.png" />
        <h3>Fale conosco</h3>
    </div>
    <div (click)="bsModalRef.hide()" class="close-btn">
        <img src="../../../../assets/icons/fechar-modal.png" />
        <span>Para manter a sua conexão com o atendente, evite deixar o chat sem interação por mais
            de 4 minutos.</span>
    </div>


</div>
<hr>
<div class="row info">
    <p>Selecione o canal de atendimento para se comunicar.
    </p>
    <img src="../../../../assets/icons/inf_icon.png" style="margin-left: 10px;" />
</div>

<label class="label-select">Canal de atendimento</label>
<select class="canal-atendimento" (change)="onChange($event.target.value)">
    <option selected value="1">Selecione</option>
    <option value="2">Help Desk corretores</option>
    <option value="3">Auto-núcleo de negócios e emissão</option>
</select>

 </mat-dialog-content>

 <h1>{{valor}}</h1>

 <div class="container-btn">
    <button class="cancelar-btn" mat-raised-button>Cancelar</button>
    <button class="prosseguir-btn" mat-raised-button>Prosseguir</button>
 </div>

In this example, the variable value is not changed to abcd in the onChange method.