ignore app.componet.html for my login page template angular7

Question

i am building an Angular 7 application have my main application using the app.component.html page and rendering the components in the router outlet on this page. but i want a different design for my login page with its own styles, since it is the first screen someone sees before

on my app.component.html

<app-nav></app-nav>
<app-sidebar></app-sidebar>  
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">

      <router-outlet></router-outlet>

</div>  <!--/.main-->

and on every other page including the dashboard this is the template

<app-nav></app-nav>
<app-sidebar></app-sidebar>  
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">            
    <app-title [pgTitleTxt]='pageTitle'></app-title>
    <div class="row">    
    <div class="col-sm-12">
            home works... 
    </div>    
    </div><!--/.row-->
</div>  <!--/.main-->

and my login template is different

<div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
        <div class="login-panel panel panel-default">
            <div class="alert alert-danger">error message... </div>
            <div class="panel-heading">Log in</div>
            <div class="panel-body">
                <form role="form">
                    <fieldset>
                        <div class="form-group">
                            <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="Password" name="password" type="password" value="">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input name="remember" type="checkbox" value="Remember Me">Remember Me
                            </label>
                        </div>
                        <a href="index.html" class="btn btn-primary">Login</a></fieldset>
                </form>
            </div>
        </div>
    </div><!-- /.col-->
</div><!-- /.row -->

problem is i want my login page to use a different router-outlet different from the other pages, and even still, use its own css and javascript libraries independent of the entire application please how do i achieve this.. thanks. because at the moment, it renders inside the on the app-component.html file and it looks like the user has already logged in, which is wrong..

DeborahK · Accepted Answer · 2019-07-27 05:45:22Z

2

You could design your app component to just be the router outlet.

Then you could design a shell component for the main nav bars with another router outlet.

That way you can route the login page to the app component's router outlet and it won't have any other accouterments.

And for all other pages, route the shell component to the app component's router outlet.

I have an example here: Load route after data is set in Angular 4

and here: Adding a navbar only for module's components

Something like this:

app component template

<router-outlet></router-outlet>

shell component template

<app-nav></app-nav>
<app-sidebar></app-sidebar>  
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">

      <router-outlet></router-outlet>

</div>  <!--/.main-->

answered Jul 27, 2019 at 5:45

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ignore app.componet.html for my login page template angular7

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related