У меня есть bootstrap3 navbar.navbar имеет форму входа справа и кнопки входа и регистрации.Я хочу, чтобы после успешного входа в систему эти элементы управления отображались и регистрировались, а ссылки на профили появлялись (и наоборот, когда пользователь нажимал кнопку выхода).Я могу сделать это, используя [hidden]="someValue", но я полагаю, что использование hidden не является правильным подходом.Я думал о том, чтобы сделать это, используя *ngIf, но моя проблема в том, что форма входа и кнопки регистрации отображаются в отдельных строках, а не в одной.Я пытался использовать <div> со стилем inline, а также <span>, но это не сработало
<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>