I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the other component on the same page while still displaying the previous login component. I actually want the new component to be displayed on a separate page.
Below is the code structure:
<body>
<app-loginpage>
<div id="loader"><img src="assets/img/loaderpreview.svg"></div>
</app-loginpage>
</body>
In the loginpage.component.html file:
<div class="text-center">
<button (click)="redirect()" class="btn btn-primary btn-lg loginbtn">
Login
</button>
<router-outlet *ngIf="loadcomponent"></router-outlet>
In the loginpage.component.ts file:
export class LoginpageComponent implements OnInit {
private loadcomponent = false;
name: string;
password: any;
constructor(private router: Router) { }
ngOnInit() {
}
redirect() {
this.loadcomponent = true;
}
The app.routing.ts file contains the routing setup for the application.
I expect the AdminLayoutComponent to be loaded on a separate page after clicking the login button, but currently, it's loading on the same page. The provided screenshots illustrate the current behavior:
Screenshot showing the Login Component
Screenshot after clicking the login button, indicating the undesired behavior where both components are displayed on the same page
Apologies in advance if I've overlooked something obvious or made a silly mistake.