Withen my home page i have a link routing to the login page with a sign in button but apon clickign it no fucntion is ran and no erro code is displayed.I made sure the function is the same name and that there checked the script files to make sure nothing was overlapping.
Details-
**Button in html -**
<button class="btn btn-primary w-100 py-2" type="button" (click)="onLogin()">Sign in</button>
**compnent.ts** -
@Component({
selector: 'app-login-page',
standalone: true,
imports: [FormsModule],
templateUrl: './login-page.component.html',
styleUrl: './login-page.component.css'
})
export class LoginPageComponent {
loginObj: any ={
'username': '',
'password': ''
}
constructor(private router: Router) { }
onLogin(){
console.log('Login Clicked');
alert('Login Clicked');
}
}
I've tried different event listeners as well as checking to see if event listening works on other pages (it does not), as well as looking in the console to see if any errors related to the button are appearing.
Angular does not pop up any errors when using ng serve. Nor does the console show what I believe are related errors.
I really need help :( i dont understand if any more code snippets needed i will provide
i did see a simalar post talk about this in april but no derict answer other than debug was given :(
Never mind, guys. I found the issue. I'm not sure how it works, but here's how I fixed my issue. Basically, in my main index.html file, which is outside my app, I have the basic boilerplate for HTML, then the app-root in there. Well, it turns out I also had the HTML boilerplate in the app.component.html, causing some sort of conflict.
So, before, I had the HTML boilerplate twice: once in my main HTML file and then again in my app.component.html like this.
before -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="main_body">
<app-header></app-header>
<router-outlet></router-outlet>
</body>
</html>
After -
<app-header></app-header>
<router-outlet></router-outlet>
this allowed all event listen to work
Answer: I had boilerplate in app.component.html when I already had boilerplate in the main index.html, creating conflicts.