Não esta sendo exibido o console.log

Não está exibindo o console.log ao clicar no botão. Meus arquivos são:

"ts"

import { Component } from '@angular/core';

@Component({
  selector: 'app-nova-transferencia',
  templateUrl: './nova-transferencia.component.html',
  styleUrls: ['./nova-transferencia.component.scss'],
})
export class NovaTransferenciaComponent {
  transferir() {
    console.log('Solicitada nova transferência');
  }
}


"html"

<section class="container">
  <form class="formulario" (ngSubmit)="transferir">
    <h2 class="formulario__titulo">Nova Transferência</h2>
    <div class="form-field">
      <label class="form-field__label" for="valor">Valor</label>
      <input class="form-field__input" id="valor" type="text" />
    </div>
    <div class="form-field">
      <label class="form-field__label" for="destino">Destino</label>
      <input class="form-field__input" id="valor" type="text" />
    </div>
    <div class="botao-wrapper">
      <button class="botao" type="submit">Transferir</button>
    </div>
  </form>
</section>

"app.module.ts"

import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NovaTransferenciaComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

E o template exibido é: (!(https://cdn1.gnarususercontent.com.br/1/792739/b4bbdaae-9c5e-404c-8c59-7ddd04dd3d63.jpg) )

node --version (16.9.0) Angular CLI (12.2.5)

Podem me ajudar?