Angular signal is not triggered(?) after the event emit from child component

I have a login form component, which closes if we click on cross or outside of the form. Sign up button has the same problem, the only difference is that the event from child for outside clicks is emitted from an event and the other two are triggered by (click).

TypeScript for parent object containing the form:

@Component({
selector: 'app-header-account-info',
imports: [
AccountLoginComponent,
AccountSignupComponent,
AccountLoggedInComponent
],
templateUrl: './header-account-info.component.html',
styleUrl: './header-account-info.component.css'
})
export class HeaderAccountInfoComponent{

userAccountService :UserAccountService= inject(UserAccountService);

authenticationWindowsStatus:WritableSignal<number>;


constructor( ) {
this.authenticationWindowsStatus = signal(1);
effect(() => {
const newValue = this.authenticationWindowsStatus();
console.log('Data has changed. Here is the new value: ' + newValue);
});
}

switch(){
this.authenticationWindowsStatus.set(this.authenticationWindowsStatus() + (this.authenticationWindowsStatus()==1 ? +1:-1));
}
isAuthenticated(){
return this.userAccountService.userDetails()!=undefined && this.userAccountService.userDetails()!= null;
}
close(){
this.authenticationWindowsStatus.set(0);
}


Html for the same component:

@if (!isAuthenticated()) {
<span>
<div class="login" (click)="authenticationWindowsStatus.set(1)">
Log in
@if (authenticationWindowsStatus()==1) {
<app-account-login (close)="close()" (signUp)="switch()"/>
}
</div>

<div class="sign-up" (click)="authenticationWindowsStatus.set(2)">
Sign up
@if (authenticationWindowsStatus()==2) {
<app-account-signup (close)="authenticationWindowsStatus.set(0)" (login)="switch()"/>
}
</div>
</span>
} @else {
<app-account-logged-in/>
}


And here is the code for the form itself:

@Component({
selector: 'app-account-login',
imports: [FormsModule, ReactiveFormsModule],
templateUrl: './account-login.component.html',
styleUrl: './account-login.component.css'
})
export class AccountLoginComponent {
userAccountService: UserAccountService = inject(UserAccountService);

@Output() close = new EventEmitter<void>();
@Output() signUp = new EventEmitter<void>();

@ViewChild('loginForm',{read:ElementRef,static : true}) loginForm : ElementRef = {} as ElementRef;
@ViewChild('loginButton',{read:ElementRef,static : true}) loginButton : ElementRef = {} as ElementRef;

fb = new FormBuilder();
registerForm = this.fb.group({
username: "",
password: "",
});
closeModal(){
console.log("closeModal");
this.close.emit();
}
signUpModal(){
this.signUp.emit();
}
onSubmit (){
if(this.registerForm.value.username?.valueOf()==null){
return;
}
if(this.registerForm.value.password?.valueOf()==null){
return;
}
this.login({
username: String(this.registerForm.value.username),
password:String(this.registerForm.value.password)});
}

async login(userDetails:UserDetails) {
await this.userAccountService.login(userDetails);
this.close.emit();
this.reload();
}
reload() {
var currentUrl = this.router.url;
this.router.navigateByUrl('/dummy',{skipLocationChange:true})
.then(()=>this.router.navigateByUrl(currentUrl));
}
constructor(renderer: Renderer2,private router: Router) {
renderer.listen('window','click',(e:Event)=>{
if(!this.loginForm.nativeElement.contains(e.target) && this.loginForm.nativeElement!=e.target){
this.close.emit();
}
})
}
}


And html for the form:

<div class="background">
<div #loginForm class="form-container" >
<div id="close-container" (click)="closeModal()">
<button id="close" > <img src="/cross.svg" alt="close"/></button>
</div>
<div class="text-container">
<h2>Log in</h2>
</div>

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
<input type="text" class="input-field" placeholder="Username" required formControlName="username">
<input type="password" class="input-field" placeholder="Password" required formControlName="password">
<p>New to reddit lite? <span (click)="signUpModal()">Sign up</span>!</p>
<button #loginButton type="submit" class="btn-submit">Log In</button>
</form>
</div>
</div>


Here is the console after I click on close:



And for the outside click, which actually works:



Continue reading...