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
Apologies in advance if I've overlooked something obvious or made a silly mistake.