Tenho uma tela no meu sistema que, ao clicar em um botão, abre uma janela modal. Nessa tela tenho o seguinte html:
info-atleta.component.html
<foot-play-edit-perfil-modal (sendValue)="receiveMessage($event)"
[player]="player" [showModalEdit]="showModalEditPerfil"></foot-play-
edit-perfil-modal>
info-atleta.component.ts
receiveMessage($event) {
console.log('teste',$event)
}
Na minha modal eu tenho alguns campos de formulário, bem básico com um botão para atualizar
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>
O problema é que a função this.sendMessage() não é chamada. Já tentei colocar só o emit(), já tentei crar um botão p testar e tb não funcionou. Só que, se eu coloco essa funcção no onInit(), ela é chamada. Ou seja, não funciona com click