Using IBM Cloud AppID in Angular Components

article-timeline.component.html

<button
  mat-raised-button
  disabled="{{!isAuthenticated}}"
  (click)="getUserInfo()"
>
  <mat-icon>account_circle</mat-icon> Profile
</button>
<button
  mat-raised-button
  color="primary"
  *ngIf="!isAuthenticated"
  (click)="onLoginPressed()"
>
  <mat-icon>lock_open</mat-icon> Login with AppID
</button>
<app-articles *ngIf="isAuthenticated"></app-articles>
<p *ngIf="!isAuthenticated">ログインしてタイムラインを見よう！</p>

article-timeline.component.ts

import {Component, OnInit} from '@angular/core';
import {AuthService} from '../../services/auth.service';

@Component({
  selector: 'app-article-timeline',
  templateUrl: './article-timeline.component.html',
  styleUrls: ['./article-timeline.component.css']
})
export class ArticleTimelineComponent implements OnInit {
  isAuthenticated: boolean;

  constructor(private authService: AuthService) {
  }

  ngOnInit() {
    this.isAuthenticated = this.authService.isAuthenticated;
  }

  async onLoginPressed() {
    await this.authService.signIn()
      .then(() => {
        this.isAuthenticated = this.authService.isAuthenticated;
        alert('Login succeeded!');
      });
  }

  async getUserInfo() {
    const userInfo = await this.authService.getUserInfo();
    alert('Name: ' + userInfo.name + '\nEmail: ' + userInfo.email);
  }

}