example.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserPageUserQuery, UserPageUserGQL, LoginPageMeQuery, LoginPageMeGQL } from '@generated-types';
import { Observable, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { SEOService } from '@services/seo.service';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas, faCoffee } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-user-page',
  templateUrl: './user-page.component.html',
  styleUrls: ['./user-page.component.scss']
})
export class UserPageComponent implements OnInit, OnDestroy {
  meQuery$: Observable<LoginPageMeQuery>;
  user: UserPageUserQuery['user'];
  panelOpenState: false;
  slugSubscription: Subscription;
  userSubscripttion: Subscription;
  constructor(
    private route: ActivatedRoute,
    private userPageUserGQL: UserPageUserGQL,
    private loginPageMeGQL: LoginPageMeGQL,
    private seoService: SEOService,
    library: FaIconLibrary
  ) {
    library.addIconPacks(fas, far, fab);
    library.addIcons(faCoffee);

    this.meQuery$ = this.loginPageMeGQL.watch({}, {
      fetchPolicy: 'cache-first',
    }).valueChanges.pipe(
      map(({ data }) => data)
    );

  }

  ngOnInit() {
    this.slugSubscription = this.route.params.subscribe(params => {
      this.getUser(params.slug);
    });
  }

  getUser(slug: string) {
    this.userSubscripttion = this.userPageUserGQL
      .watch({ slug: slug }, {
        fetchPolicy: 'cache-first'
      }).valueChanges.subscribe(({ data }) => {
        this.user = data.user;
        this.updateTag(this.user);
      });
  }

  updateTag(user: UserPageUserQuery['user']) {
    const title = `${user.firstName + ' ' + user.lastName} (@${user.userName})`;
    this.seoService.addTitle(title);
    this.seoService.addDefaultMetaTags();
    this.seoService.meta.updateTag({ property: 'og:title', content: title });
    this.seoService.meta.updateTag({ property: 'og:description', content: title });
    this.seoService.meta.updateTag({ name: 'description', content: title });
  }

  ngOnDestroy() {
    this.slugSubscription.unsubscribe();
    this.userSubscripttion.unsubscribe();
  }

}