What is the best way to connect a login component to a button on the home page in Angular, so that it opens up a login page?
I have attempted to achieve this by creating a click event for the login button within myaccount-dropdown component in my-account-dropdown.html:
<a href="#" class="sub-menu-link">
<button (click)="navigateToLogin('login')">Login</button>
</a>
In my-account-dropdown.ts:
export class MyAccountDropdownComponent {
isMenuOpen: boolean = false;
toggleMenu(): void {
this.isMenuOpen = !this.isMenuOpen;
}
constructor(private router: Router) {}
navigateToLogin(pagename: string):void {
this.router.navigate([`${pagename}`]);
}
}
In app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from '../app/login/login.component';
const routes: Routes = [
// Other routes
{ path: 'login', component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
I have also created header and footer components and linked them to the home page in app.component.html. However, when I click the login button, the login page flickers and appears under the homepage. How can I make sure that only the login page is displayed when the button is clicked? Where should I properly link it?