show user in show

restrict show actions

src/app/services/user/owner.directive.ts

@@ -1,14 +1,18 @@
 import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
-import {User} from './user';
 import {UserService} from './user.service';
 
 @Directive({
   selector: '[appOwner]'
 })
 export class OwnerDirective implements OnInit {
-  @Input() appOwner: string;
-  private currentUser: User;
-  private loggedIn: boolean;
+  private currentUserId: string;
+
+  private _appOwner: string;
+
+  @Input() set appOwner(value: string) {
+    this._appOwner = value;
+    this.updateView();
+  }
 
   constructor(
     private element: ElementRef,
@@ -20,12 +24,8 @@ export class OwnerDirective implements OnInit {
   }
 
   public ngOnInit(): void {
-    this.userService.user$.subscribe(user => {
-      this.currentUser = user;
-      this.updateView();
-    });
-    this.userService.loggedIn$().subscribe(_ => {
-      this.loggedIn = !!_;
+    this.userService.userId$.subscribe(user => {
+      this.currentUserId = user;
       this.updateView();
     });
     this.updateView();
@@ -33,10 +33,9 @@ export class OwnerDirective implements OnInit {
 
   private updateView() {
     this.viewContainer.clear();
-    if (this.loggedIn && this.currentUser.id === this.appOwner) {
+    if (this.currentUserId === this._appOwner) {
       this.viewContainer.createEmbeddedView(this.templateRef);
     }
   }
 
-
 }

src/app/services/user/user-name/user-name.component.html

@@ -0,0 +1 @@
+{{name$|async}}

src/app/services/user/user-name/user-name.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {UserNameComponent} from './user-name.component';
+
+describe('UserNameComponent', () => {
+  let component: UserNameComponent;
+  let fixture: ComponentFixture<UserNameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserNameComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserNameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/services/user/user-name/user-name.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from '@angular/core';
+import {UserService} from '../user.service';
+import {map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'app-user-name',
+  templateUrl: './user-name.component.html',
+  styleUrls: ['./user-name.component.less']
+})
+export class UserNameComponent {
+  public name$: Observable<string>;
+
+  constructor(
+    private userService: UserService
+  ) {
+  }
+
+  @Input() set userId(id: string) {
+    this.name$ = this.userService.getUserbyId$(id).pipe(map(_ => _.name));
+  }
+
+}

src/app/services/user/user-name/user-name.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {UserNameComponent} from './user-name.component';
+
+@NgModule({
+  declarations: [UserNameComponent],
+  exports: [UserNameComponent],
+  imports: [CommonModule]
+})
+export class UserNameModule {
+}

src/app/services/user/user.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {BehaviorSubject, Observable} from 'rxjs';
-import {filter, first, switchMap} from 'rxjs/operators';
+import {filter, first, switchMap, tap} from 'rxjs/operators';
 import {User} from './user';
 import {DbService} from '../db.service';
 import {environment} from '../../../environments/environment';
@@ -14,18 +14,15 @@ export class UserService {
   constructor(private afAuth: AngularFireAuth, private db: DbService, private router: Router) {
     this.afAuth.authState.pipe(
       filter(_ => !!_),
+      tap(auth => this._userId$.next(auth.uid)),
       switchMap(auth => this.readUser$(auth.uid)),
     ).subscribe(_ => this._user$.next(_));
   }
 
-  public getUserbyId(userId: string): Promise<User> {
-    return this.db.doc$<User>('users/' + userId).pipe(first()).toPromise();
-  }
+  private _userId$ = new BehaviorSubject<string>(null);
 
-  public async login(user: string, password: string): Promise<any> {
-    const aUser = await this.afAuth.auth.signInWithEmailAndPassword(user, password);
-    const dUser = await this.readUser(aUser.user.uid);
-    this._user$.next(dUser);
+  public get userId$(): Observable<string> {
+    return this._userId$.asObservable();
   }
 
   private _user$ = new BehaviorSubject<User>(null);
@@ -34,6 +31,21 @@ export class UserService {
     return this._user$.pipe(filter(_ => !!_));
   }
 
+  public getUserbyId(userId: string): Promise<User> {
+    return this.getUserbyId$('users/' + userId).pipe(first()).toPromise();
+  }
+
+  public getUserbyId$(userId: string): Observable<User> {
+    return this.db.doc$<User>('users/' + userId);
+  }
+
+  public async login(user: string, password: string): Promise<any> {
+    const aUser = await this.afAuth.auth.signInWithEmailAndPassword(user, password);
+    const dUser = await this.readUser(aUser.user.uid);
+    this._user$.next(dUser);
+    this._userId$.next(aUser.user.uid);
+  }
+
   public loggedIn$ = () => this.afAuth.authState;
 
   public list$ = (): Observable<User[]> => this.db.col$('users');
@@ -41,6 +53,7 @@ export class UserService {
   public async logout(): Promise<any> {
     await this.afAuth.auth.signOut();
     this._user$.next(null);
+    this._userId$.next(null);
   }
 
   public async update$(uid: string, data: Partial<User>): Promise<void> {