ngIf user is logged in show component - html

Question

I'm making an app that needs to be accessible for users without an account but as soon as someone makes an account they need to be able to see additional functionality and it needs to be responsive as well.
For responsiveness I'm using material design for bootstrap and angular materialmdbootstrap. In the example bellow I'd want to change the mdb-col-size from 9 to 12 depending on if the user is logged in or not and thus not display save,... option(s).
<div>
<div class="row ">
<div class="col-lg-9 col-md-8 col-sm-6 ">
<div class="row ">
<div class="col-md-12 mb-12">
<div class="card testimonial-card ">
<div class="card-up lighten-1 ">
<div class="card-body">
<h4 class="card-title">{{ dare.title }}</h4>
<hr />
<p>{{ dare.description }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6"><!--this shouldn't be displayed when someone is not logged in-->
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Save
</button>
</div>
</div>
<br />
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Challenge someone else
</button>
</div>
</div>
<br />
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Create new ...
</button>
</div>
</div>
</div>
</div>
<br />
</div>
I expect to see the options only when someone is logged in and the responsiveness changing accordingly.
Thanks you in advance!

Answer 1

You should rather use Guards in your project, example in documentation: https://angular.io/api/router/CanActivate
To achieve it you should implement two components (one for authenticated user, another for non-authenticated user). Define routing, for example:
{
path: '',
component: AuthenticatedUserComponent,
canActivate: [AuthenticatedUserGuard]
},
{
path: '',
component: UnauthenticatedUserComponent
}
And then define guard:
#Injectable()
class AuthenticatedUserGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
return true; // here you should call a method from service, that
// that holds whether user is authenticated or not
}
}