Angular's toolbar has the ability to alter the appearance of my login interface

Question

Angular's toolbar has the ability to alter the appearance of my login interface

I am facing an issue with my final paper assignment regarding my Angular project and the Login component. I wanted to hide the toolbar component when there is no currentUser present in the system. Although I was able to achieve this using

<ng-content></ng-content>

in the Toolbar, I noticed that it changed the style of the Login component.

login.component.html

<div class="logo">
    <a href="https://www.cedupcriciuma.com.br/" target="_blank"><img class="iconLogo"
            src="../../../../assets/LogoCedup.png" alt="Logo"></a>
</div>
<div class="spinnerDiv">
...
...
...

toolbar-menu.component.html

<div>
...
...
...

app.component.html

<app-toolbar-menu >
    <router-outlet></router-outlet>
</app-toolbar-menu>

IMAGES OF THE APPLICATION How it should be

How it is

Thank you for your assistance!

css angular typescript

Answer 1

Answer №1

It appears that the goal is to adjust the layout based on whether a user is logged in or not.

One approach to achieve this is by creating two layouts as shown below:

BaseLayoutComponent

@Component({
    selector: 'app-base-layout',
    template: `
        <router-outlet></router-outlet>
    `
})
export class BaseLayoutComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }

}

SiteLayoutComponent

@Component({
    selector: 'app-site-layout',
    template: `
        <app-header></app-header>
        <router-outlet></router-outlet>
    `
})
export class SiteLayoutComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }

}

You can then switch between them in your app-routing.module.ts like so:

const routes: Routes = [{
        path: '',
        component: SiteLayoutComponent,
        children: [
            { path: '', redirectTo: '/home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent }
        ]
    },
    {
        path: '',
        component: BaseLayoutComponent,
        children: [
            {
                path: 'auth',
                loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
                canActivate: [NotLoggedInGuard]
            }
        ]
    },
    
];

The NotLoggedInGuard simply checks if the user is not logged in.

Answer 2

It appears that the goal is to adjust the layout based on whether a user is logged in or not.

One approach to achieve this is by creating two layouts as shown below:

BaseLayoutComponent

@Component({
    selector: 'app-base-layout',
    template: `
        <router-outlet></router-outlet>
    `
})
export class BaseLayoutComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }

}

SiteLayoutComponent

@Component({
    selector: 'app-site-layout',
    template: `
        <app-header></app-header>
        <router-outlet></router-outlet>
    `
})
export class SiteLayoutComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }

}

You can then switch between them in your app-routing.module.ts like so:

const routes: Routes = [{
        path: '',
        component: SiteLayoutComponent,
        children: [
            { path: '', redirectTo: '/home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent }
        ]
    },
    {
        path: '',
        component: BaseLayoutComponent,
        children: [
            {
                path: 'auth',
                loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
                canActivate: [NotLoggedInGuard]
            }
        ]
    },
    
];

The NotLoggedInGuard simply checks if the user is not logged in.

Angular's toolbar has the ability to alter the appearance of my login interface

Answer №1

Similar questions

Limiting the Rate of Requests to a TCP Server using net.Server

Is there a way to move the <hr> element closer to the content in the header section?

Utilizing Angular 6's Mat-Table in a dynamic way

Confirmation of successful form submission

Fulfilling a pledge from an external source to postpone the implementation of the program

Issue with displaying the correct size of column shortcodes in Wordpress

Can you explain the contrast between Angular 2 components and directives?

The alignment of Bootstrap table cells is inconsistent

Angular 6 - Unlocking the Secrets of Filtered Results

Utilizing media queries and JQuery to display a variety of menus based on screen

Firefox exhibiting an additional pixel when hovering over dropdown menus

Is it possible to reset the value of an input field with type "number" similar to how it can be done with type "search"?

Angular's dependency injection gets disrupted by the use of lazy loading

Issues arise during Angular2 building process, such as failure to locate the name 'document' and unresolved references

Are you making the switch to Bootstrap 4 from Bootstrap 3?

The JSON representation is not appearing for the newly introduced nested components

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

Images that are not aligned to the left

Tips for incorporating null checks into a function in TypeScript

designing an ornate border with CSS techniques