In my application, I have created a custom button component that triggers a specific function from the parent component where it is imported. For example, in a login form, clicking the button should call the login() function.
The issue I'm facing is that whenever I click the login button, the method executes twice instead of once. This behavior is puzzling to me. There's also a forgot password button beside it, using the same template but with a different bound function to the click directive. Surprisingly, when I click on the forgot password link, it still runs the login() function, but only once this time.
For reference, here's a screenshot of my login form layout:
https://i.sstatic.net/eBVkx.png
Below you'll find snippets of my code for insight:
button.component.ts
import { Component, ViewEncapsulation, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ButtonComponent implements OnInit{
@Input() group: FormGroup;
@Input() type: string;
@Input() description: string;
@Input() class: string;
@Output() callFunction = new EventEmitter();
constructor(){ }
ngOnInit(){
this.group = new FormGroup({});
}
onClick(event){
this.callFunction.emit(event);
}
}
button.component.html
<div [formGroup]="group">
<button [type]="type" [class]="class" (click)="onClick($event)">{{ description }}</button>
</div>
login.component.ts
import { Component, OnInit, ViewChild, ViewContainerRef, AfterContentInit, ComponentFactoryResolver } from '@angular/core';
// Remaining code omitted for brevity
login.component.html
<div class="app-body">
// Remaining HTML code snippet omitted
</div>
SIDE NOTE: I am encountering an issue where CoreUI styles are not being correctly applied to child components like text fields and buttons. These components are inheriting plain bootstrap styles instead. Any assistance with resolving this problem would be greatly appreciated.