I'm working with Angular 19 and trying to use ngModel and click in a component. However, both are being treated as strings in the HTML template. If you don't understand what i mean by treated as strings please open this url => .png, and you will understand they're not working as expected. I’ve tried creating two projects: one with a standalone component and the other without, but the issue persists.

Below is my code:

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

@Component({
  selector: 'app-login',  
  standalone: true, // Indique que c'est un composant autonome

  imports: [FormsModule],
  templateUrl: './loginponent.html',
  styleUrl: './loginponent.css'
})
export class LoginComponent {
  loginObj : Login;
  constructor() {
    this.loginObj = new Login();
    };
    onlogin(){
  
    }
}
export class Login {
  Email: string;
  Password: string;
  constructor(){
    this.Email = '';
    this.Password = '';
  }
}

 

Steps I’ve tried:

1. Imported FormsModule into the standalone component as well as the AppModule.
2. Cleared node_modules and reinstalled dependencies, but the issue persists.

Even after these changes, ngModel is still being treated as a string, and the click event is not triggered as expected. Could anyone help me understand why this is happening?

This the expectation. This is how click and NgModel should work =>

.png