какой путь лучше для моей формы входа, чтобы быть вне моего углового материала sidenav

Question

в моем приложении у меня есть компонент sidenav материала, а все остальные компоненты находятся внутри этого sidenav, как показано ниже:

    <!-- this is inside my app.component.ts -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

проблема в том, что я хочу, чтобы компонент формы входа в систему находился вне sidenav, поэтому яприйти с двумя подходами:

• это первый:

    <!-- also in my app.component.ts
     use variable loggedIn to see if the user is logged in or not -->

    <div *ngIf="!loggedIn" class="login-app">
        <app-authentication></app-authentication>
    </div>
    <!-- if the user loggedIN -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

• это второй

    <div *ngIf="!loggedIn" class="login-app">
        <router-outlet></router-outlet>
    </div>
    <!-- if the user loggedIN -->
    <app-side-nav *ngIf="loggedIn">
        <router-outlet></router-outlet>
    </app-side-nav>

во второмодин я использовал маршрутизацию для формы входа в систему, а также использовал Guard для других компонентов мой вопрос:

1. Каков наилучший подход ??
2. Есть ли лучший способ сделать это безопасным способом ??

PS: два подхода работают отлично !!