Navigating between pages has become challenging due to issues with the navbar, sidebar,

Question

Navigating between pages has become challenging due to issues with the navbar, sidebar,

I successfully developed 4 Angular components:

1st component: menu
2nd component: header
3rd component: home
4th component: login

The menu component features a sidebar/navbar created using Material UI. The login component consists of the login page. However, when running ng serve, both the menu and login components are displayed together. My goal is to have only the login component displayed on the initial page redirect. I have set up routing for the login component to appear on the first page, but it currently appears with the menu bar content as well, which can be seen in the image. In app.component.html, I have added

<app-menu></app-menu>

because after logging in, I want the other component data to display when clicking any button on the sidebar.

Below is the code for the menu bar and all the components:

<mat-toolbar color="primary">
    <button (click)="drawer.toggle()" mat-icon-button>
        <mat-icon>menu</mat-icon>
    </button>
    <span>Angular</span>
    <span class="example-spacer"></span>
    <button routerLink="header" mat-button>home</button>
    <button routerLink="sidebar" mat-button>About</button>
    <button mat-button>contact</button>
    <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-success" type="submit">Search</button>
    </form>
    
</mat-toolbar>

<mat-drawer-container autosize>
    <mat-drawer #drawer opened="true" mode="side" position="start">
    <mat-nav-list>
        <mat-list-item>
            <button routerLink="header" mat-button><mat-icon>home</mat-icon> Home</button>
        </mat-list-item>
        <mat-list-item>
            <button routerLink="home" mat-button><mat-icon>home</mat-icon> Pages</button>
        </mat-list-item>
        <mat-list-item>
            <button routerLink="" mat-button><mat-icon>explore</mat-icon> Table</button>
        </mat-list-item>
        <mat-list-item>
            <button  routerLink="#" mat-button><mat-icon>Layout</mat-icon> Layout</button>
        </mat-list-item>
        <mat-list-item>
            <button mat-button><mat-icon>settings</mat-icon> Settings</button>
        </mat-list-item>
        <mat-list-item>
            <button mat-button><mat-icon>help</mat-icon> Help</button>
        </mat-list-item>
    </mat-nav-list>
    </mat-drawer>
    <mat-drawer-content>
        <div style="text-align: center;min-height: 600px;">
          <router-outlet></router-outlet>
            </div>
    </mat-drawer-content>
</mat-drawer-container>

Login Component Code:

<body>
    <form [formGroup] ="loginform1" (ngSubmit)="loginUser()">
        <div class="login-container">
            <h2 class="lg">Login Page</h2>
            <label>User Name</label>
            <input type="text" name="Uname" id="Uname"  placeholder="Username" formControlName="Uname">
            <span style="color: red;" *ngIf="Uname && Uname.invalid && Uname.touched" >this field is required.</span>
            <br><br>
            <label>Password</label>
            <input type="password" name="password" id="Pass"  placeholder="Password" formControlName="password">
            <span style="color: red;" *ngIf="password && password.invalid && password.touched" >this field is required.</span>
            <br>
            <a href="#" style="color: white;">Forgot Password</a><br><br>
            <button  class="bt" (click)="submit()" [disabled]="loginform1.invalid">Login</button> <br><br>
            <input type="checkbox" id="check">
            <span>Remember me</span><br>
            <button type="type" class="btn btn-primary" routerLink="/dashboard">Register</button>
            <br><br>
        </div>
    </form>
</body>

Code in app.component.html:

<app-menu></app-menu>

Routing configuration in app.routing:

{path:'dashboard', component:DashboardComponent},
{path:'header', component:Headers},
{path:'home', component:HomeComponent},
{path:'menu', component:MenuComponent},
{path:'login',component:LoginComponent},
{ path: '',   redirectTo: '/login', pathMatch: 'full' },

I aim to have only the login page displayed when running ng serve, while ensuring that all buttons in the sidebar and navbar work correctly with the router link.

angular typescript angular-material angular-ui-router

Answer 1

Answer №1

Regardless of the path you take, angular will consistently present the AppComponent as the main entry point of your application (if you examine your index.html file, you'll see that the app component is directly nested within the body, and this cannot be altered).

Furthermore, regardless of the route you follow, angular will substitute the occurrence of

<router-outlet></router-outlet>

with the appropriate object based on your app's routing configuration.

Hence, when your path leads to login, these are the 3 steps involved in generating your HTML:

You first create your final HTML file using the app template app.component.html. This template includes a reference to your MenuComponent:
```
<app-menu></app-menu>
```
.
You then generate HTML content based on the menu template menu.component.html. The resulting HTML content replaces
```
<app-menu></app-menu>
```
in your final HTML file. Within this content, there is another reference managed by your app's routing logic:
```
<router-outlet></router-outlet>
```
.
As per your app's routing configuration, the path login corresponds to the LoginComponent. Therefore, you generate HTML content from the login template login.component.html. This generated content takes the place of
```
<router-outlet></router-outlet>
```
in your final HTML file.

In the end, the desired outcome is the login template nested inside the menu template which, in turn, is nested inside the app template.

Solution

The simplest way to display only the login template at the path /login in your current setup is to modify your AppComponent so that it directly includes your login component without the MenuComponent specifically for the /login path.

In your app.component.ts, define a variable to determine the current case:

export class AppComponent {
  public isLoginPath: boolean = this.route.url === "/login";  
  constructor(private route: Router) { }
}

In your app.component.html, utilize this variable to control the behavior:

<app-menu *ngIf="!isLoginPath"></app-menu>
<router-outlet *ngIf="isLoginPath"></router-outlet>

(also, remove <body> from your login.component.html, as you are already within a body element since the login component is nested inside the app component which itself is nested within the body of the index.html)

Answer 2

Regardless of the path you take, angular will consistently present the AppComponent as the main entry point of your application (if you examine your index.html file, you'll see that the app component is directly nested within the body, and this cannot be altered).

Furthermore, regardless of the route you follow, angular will substitute the occurrence of

<router-outlet></router-outlet>

with the appropriate object based on your app's routing configuration.

Hence, when your path leads to login, these are the 3 steps involved in generating your HTML:

You first create your final HTML file using the app template app.component.html. This template includes a reference to your MenuComponent:
```
<app-menu></app-menu>
```
.
You then generate HTML content based on the menu template menu.component.html. The resulting HTML content replaces
```
<app-menu></app-menu>
```
in your final HTML file. Within this content, there is another reference managed by your app's routing logic:
```
<router-outlet></router-outlet>
```
.
As per your app's routing configuration, the path login corresponds to the LoginComponent. Therefore, you generate HTML content from the login template login.component.html. This generated content takes the place of
```
<router-outlet></router-outlet>
```
in your final HTML file.

In the end, the desired outcome is the login template nested inside the menu template which, in turn, is nested inside the app template.

Solution

The simplest way to display only the login template at the path /login in your current setup is to modify your AppComponent so that it directly includes your login component without the MenuComponent specifically for the /login path.

In your app.component.ts, define a variable to determine the current case:

export class AppComponent {
  public isLoginPath: boolean = this.route.url === "/login";  
  constructor(private route: Router) { }
}

In your app.component.html, utilize this variable to control the behavior:

<app-menu *ngIf="!isLoginPath"></app-menu>
<router-outlet *ngIf="isLoginPath"></router-outlet>

(also, remove <body> from your login.component.html, as you are already within a body element since the login component is nested inside the app component which itself is nested within the body of the index.html)

Answer 3

Answer №2

For Exclusive Use

<router-outlet ></router-outlet>

should be placed in app-component.html only.

To display the menu on all pages except the login page, configure routing as follows:

{
 path:'menu', 
 component:MenuComponent,
 children:[ 
     {path:'dashboard', component:DashboardComponent},
     {path:'home', component:HomeComponent},
 ]
},
{path:'login',component:LoginComponent},
{ path: '',   redirectTo: '/login', pathMatch: 'full' },

The routing for the login page click should lead to 'menu/home'

Although recommended routing setup is provided below instead:

{ path: '',   redirectTo: '/home', pathMatch: 'full' },
{
 path:'', 
 component:MenuComponent,
 canActivateChild:[OurRouteGuard]
 children:[ 
     {path:'dashboard', component:DashboardComponent},
     {path:'home', component:HomeComponent},
 ]
},
{path:'login',component:LoginComponent},

Implement a ROUTING GUARD (canactivate or canactivatechild) to verify user authentication status and direct them to designated PAGEs within your components. The routing guard will steer users towards the login page if not logged in.

Then, clicking on the login page route should go to 'home'

Answer 4

For Exclusive Use

<router-outlet ></router-outlet>

should be placed in app-component.html only.

To display the menu on all pages except the login page, configure routing as follows:

{
 path:'menu', 
 component:MenuComponent,
 children:[ 
     {path:'dashboard', component:DashboardComponent},
     {path:'home', component:HomeComponent},
 ]
},
{path:'login',component:LoginComponent},
{ path: '',   redirectTo: '/login', pathMatch: 'full' },

The routing for the login page click should lead to 'menu/home'

Although recommended routing setup is provided below instead:

{ path: '',   redirectTo: '/home', pathMatch: 'full' },
{
 path:'', 
 component:MenuComponent,
 canActivateChild:[OurRouteGuard]
 children:[ 
     {path:'dashboard', component:DashboardComponent},
     {path:'home', component:HomeComponent},
 ]
},
{path:'login',component:LoginComponent},

Implement a ROUTING GUARD (canactivate or canactivatechild) to verify user authentication status and direct them to designated PAGEs within your components. The routing guard will steer users towards the login page if not logged in.

Then, clicking on the login page route should go to 'home'

Navigating between pages has become challenging due to issues with the navbar, sidebar,

Answer №1

Answer №2

Similar questions

Hover over to reveal the button after a delay

DuplicateModelError: Unable to duplicate model after it has been compiled, React.js, MongoDB, TypeScript

Incorporate any enum value into a Typescript interface

Setting up Node on a Ubuntu system

Struggling with intricate generic type mapping of records in Typescript

Steps to resolve the error message 'Argument of type 'number' is not assignable to parameter of type 'string | RegExp':

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

employing flush for lodash's throttle wrapper

Strange compilation error encountered with ng-packagr due to Angular @Input inheritance

Material UI autocomplete is not detecting the options parameter as an array

How do I define two mutations in a single component using TypeScript and react-apollo?

Obtaining RouteParams in the loader function of RouteConfig can be achieved by following a

Guide to employing Axios types in project declaration files

Navigating with the router on a different page

Create a dynamically updating list using React's TypeScript rendering at regular intervals

Typedi's constructor injection does not produce any defined output

Uncover hidden mysteries within the object

What is the best way to restrict the key of an object type to only be within a specific union in TypeScript?

A step-by-step guide on making a web API request to propublica.org using an Angular service

What is the process of declaring a method within a subclass and then retrieving it from a method within the parent class using Typescript?