Inicio de home y Angular Material

src/app/header/header.component.html

@@ -0,0 +1,13 @@
+<div>
+  <img src="/assets/img/logo.png" />
+
+  <div *ngIf="name; then thenBlock; else elseBlock"></div>
+  <ng-template #thenBlock>
+    {{ name }}
+    <button class="btn btn-default" (click)="logout()">Logout</button>
+  </ng-template>
+  <ng-template #elseBlock>
+    <button class="btn btn-default" (click)="login()">Login</button>
+  </ng-template>
+
+</div>

src/app/header/header.component.spec.ts

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

src/app/header/header.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { authConfig } from '../auth.config';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css'],
+})
+export class HeaderComponent implements OnInit {
+  constructor(private oauthService: OAuthService) {}
+
+  ngOnInit(): void {}
+
+  async login(): Promise<void> {
+    // Tweak config for code flow
+    this.oauthService.configure(authConfig);
+    console.log('login pre');
+    await this.oauthService.loadDiscoveryDocument();
+    console.log('login post');
+    sessionStorage.setItem('flow', 'code');
+
+    this.oauthService.initLoginFlow();
+  }
+
+  logout(): void {
+    this.oauthService.revokeTokenAndLogout();
+  }
+
+  get name(): any {
+    const claims = this.oauthService.getIdentityClaims();
+    if (!claims) {
+      return null;
+    }
+    return claims['name'];
+  }
+}