File
Implements
Metadata
| selector |
cx-login |
| templateUrl |
./login.component.html |
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@spartacus/core';
import { User, UserAccountFacade } from '@spartacus/user/account/root';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'cx-login',
templateUrl: './login.component.html',
})
export class LoginComponent implements OnInit {
user$: Observable<User | undefined>;
constructor(
private auth: AuthService,
private userAccount: UserAccountFacade
) {}
ngOnInit(): void {
this.user$ = this.auth.isUserLoggedIn().pipe(
switchMap((isUserLoggedIn) => {
if (isUserLoggedIn) {
return this.userAccount.get();
} else {
return of(undefined);
}
})
);
}
}
<ng-container *ngIf="user$ | async as user; else login">
<div class="cx-login-greet">
{{ 'miniLogin.userGreeting' | cxTranslate: { name: user.name } }}
</div>
<cx-page-slot position="HeaderLinks"></cx-page-slot>
</ng-container>
<ng-template #login>
<a role="link" [routerLink]="{ cxRoute: 'login' } | cxUrl">{{
'miniLogin.signInRegister' | cxTranslate
}}</a>
</ng-template>
Legend
Html element with directive