Just starting out with Angular 5 and looking to implement a login page as the initial screen of my app.
Currently, my appComponent displays a toolbar and side navigation bar. However, I want to first show a login screen upon app load. Once the user successfully logs in, they should be redirected to the Home page where different components can be loaded based on menu selection.
If I set my appComponent as the login component, I lose the ability to load different components on the Home page based on user selection from the menu.
Here is a snippet of my app.component.html:
<mat-sidenav-container fullscreen>
<!-- Side Nav here -->
</mat-sidenav-container>
When running the application, currently the default landing page is the Home page. My goal is to display a full-screen login page initially, rather than automatically navigating to the Home page.
const routings: Routes = [
{path:'',redirectTo:'/login',pathMatch:'full'},
{path:'home',component:HomeComponent},
{path:'account',component:AccountComponent},
{path:'settings',component:SettingsComponent},
{path:'**',redirectTo:'/login',pathMatch:'full'},
];
Instead of redirecting to app-root when the URL is blank or invalid, I aim to direct users to the login page. Any help or suggestions on how to achieve this would be greatly appreciated!