Eventemmiter does not work when the button is clicked

Question

I have a screen on my system that, when clicking on a button, opens a modal window. On this screen I have the following html:

info-athlete.component.html

<foot-play-edit-perfil-modal (sendValue)="receiveMessage($event)" 
[player]="player" [showModalEdit]="showModalEditPerfil"></foot-play- 
edit-perfil-modal>

info-athlete.component.ts

receiveMessage($event) {
   console.log('teste',$event)
}

In my modal I have some form fields, very basic with a button to update

Edit.perfil.modal.ts

@Output() sendValue = new EventEmitter<any>();
...
sendMessage() {
  this.sendValue.emit('teste')
}
...
updateProfile(){
  this.sendMessage()
}

Edit.perfil.modal.html

    <foot-play-modal title="Editar Perfil" [showModal]="showModalEdit">
    <div class="big-modal">

        <div class="perfil-modal">
            <div class="perfil-modal__content">
                <div class="perfil-modal__group1">
                    <label for="club-name">Nome </label>

                    <input type="text" id="club-name" placeholder="Seu nome" [(ngModel)]="editPerfilModal?.user?.name && editPerfilModal.user.name">

                    <label for="club-email">Apelido</label>
                    <input type="email" id="club-email" placeholder="Seu apelido" [(ngModel)]="editPerfilModal.nickname">

                    <label for="position1">Posição 1</label>
                    <select id="position1" #position1 (change)="changePosition()" [(ngModel)]="position1Model">
                        <option *ngFor="let position of positions; let value = index" [value]="position.id"> {{ position.label }}</option>
                      </select>

                    <label>Altura</label>
                    <div class="flex">

                        <select class="margin-right" name="usercharge" id="usercharge" [(ngModel)]="heigthModel">
                            <option [ngValue]="null">Selecione</option>
                            <option [ngValue]="1">1 m</option>
                            <option [ngValue]="2">2 m</option>
                            <option [ngValue]="3">3 m</option>
                            <option [ngValue]="4">4 m</option>
                        </select>

                        <select name="usercharge" id="usercharge" [(ngModel)]="cmModel">
                            <option [ngValue]="null">Selecione</option>
                            <option *ngFor="let cmValue of cm" [value]="cmValue">{{ cmValue }}</option>
                        </select>
                    </div>

                    <div>
                        <label for="countries">País</label>
                        <select name="countries" id="countries" [(ngModel)]="countryModelId" (ngModelChange)="getStates(countryModelId)">
                            <option [ngValue]="country.id" *ngFor="let country of countries">{{ country.name }}</option>
                        </select>
                    </div>

                    <div>
                        <label for="cities">Cidade</label>
                        <select name="brazil-cities" id="cities" [(ngModel)]="cityModelId">
                            <option value="0">Selecione</option>
                              <option [ngValue]="city.id" *ngFor="let city of cities">{{ city.name }}</option>
                          </select>
                    </div>

                </div>
                <!-- ./-->

                <div class="perfil-modal__group2">
                    <label for="username">Sobrenome</label>
                    <input type="text" id="username" placeholder="Sobrenome" [(ngModel)]="editPerfilModal?.user?.lastName && editPerfilModal.user.lastName">


                    <label>Data nascimento</label>
                    <div class="flex">
                        <select class="margin-right" [(ngModel)]="day">
                                <option [value]="null">Selecione</option>
                                <option *ngFor="let day of days" [value]="day">{{ day }}</option>
                            </select>

                        <select class="margin-right" [(ngModel)]="month">
                                <option [value]="null">Selecione</option>
                                <option  *ngFor="let month of months" [value]="month">{{ month }}</option>
                            </select>

                        <select [(ngModel)]="year">
                                <option [value]="null">Selecione</option>
                                <option *ngFor="let year of years" [value]="year">{{ year }}</option>
                            </select>
                    </div>

                    <label for="position2">Posição 2</label>
                    <select id="position2" #position2 (change)="changePosition()" [(ngModel)]="position2Model">
                          <option *ngFor="let position of positions; let value = index" [value]="position.id"> {{ position.label }}</option>
                        </select>
                    <div #warning *ngIf="position1Model == position2Model">
                        <foot-play-alert>
                            <p class="warning-text">Essa posição já foi selecionada na posição 1.</p>
                        </foot-play-alert>
                    </div>
                    <br>
                    <label for="dominant-foot">Pé domninante</label>
                    <select id="dominant-foot" [(ngModel)]="dominantFootModelId">
                          <option *ngFor="let foot of dominantFoot" [ngValue]="foot.id">{{ foot.label }}</option>
                        </select>


                    <label for="states">Estado</label>
                    <select name="brazil-states" id="states" [(ngModel)]="stateModelId" (ngModelChange)="getCities(stateModelId)">
                        <option value="0">Selecione</option>
                      <option *ngFor="let state of states" [ngValue]="state.id">{{ state.name }}</option>
                        </select>

                    <div class="perfil-modal__buttons">
                        <button class="btn btn--primary" (click)="updateProfile()">Salvar</button>
                    </div>
                    <!-- ./privacy-modal__buttons-->

                </div>
                <!-- ./-->
            </div>


        </div>
        <!-- ./-->

    </div>
    <!-- ./privacy-modal mini-modal-->

</foot-play-modal> 

The problem is that the function this.sendMessage() is not called. I have tried to put only Emit(), I have tried to crack a button p test and tb did not work. Only, if I put this function in onInit(), it is called. That is, it does not work with click