inline style for Div or span not making element inline - angular5

Question

I have a bootstrap3 navbar. The navbar has a login form on the right and login and signup buttons. I want that once the user logs in successfully, these controls disapper and signup and profile links come up (and vice versa when the user clicks sign out). I am able to do this using [hidden]="someValue" but I suppose using hidden is not the right approach. I thought of doing it using *ngIf but my issue is that the login form and sign up buttons appear in separate lines and not in single line. I tried using <div> with inline style and also <span> but it didn't work
<div *ngIf = "userNotloggedIn" [ngStyle]="{display: inline}"> <!--tried span as well but it didnt' work either-->
<li ><!-- Navbar Form --> <!-- Instead of ngIf, if I use [hidden]="!userNotloggedIn" for each li then it works but I want to use ngIf-->
<form class="form-inline" [formGroup]="loginForm" (ngSubmit)="signInUser()" novalidate>
<label for="username" class="control-label required sr-only">Username</label>
<input type="text" id="username" class="form-control" placeholder="username" formControlName="userName" [ngClass]="validateField('userName')" required>
<app-show-errors [control]="loginForm.controls.userName"></app-show-errors>
<label for="password" class="control-label required sr-only">Password</label>
<input type="password" id="password" class="form-control" placeholder="password" formControlName="password" [ngClass]="validateField('password')" required>
<app-show-errors [control]="loginForm.controls.password"></app-show-errors>
<button type="submit" id="login-button" class="btn content-div__button--blue btn-sm">Sign In</button>
</form>
</li>
<li class="nav-item" > <!-- [hidden]="!userNotloggedIn" works-->
<a class="nav-link" [routerLink]="signupRouterLink">Sign Up</a>
</li>
</div>
<div *ngIf="!userNotloggedIn" [ngStyle]="{display: inline}">
<li class="nav-item" > <!-- [hidden]="userNotloggedIn" works-->
<a [routerLink]="" (click)="onProfileClick()">My Profile</a>
</li>
<li class="nav-item" > <!-- [hidden]="userNotloggedIn" works -->
<a [routerLink]="" (click)="onSignoutClick()">Sign out</a>
</li>
</div>

Answer 1

I was able to solve my problem using ng-container instead of div or span but I don't know why div or span didnt work. Happy to accept answers which can explain this.