Developer List Element
MODIFY
src/app/admin/admin.component.html
src/app/admin/admin.component.html
<p>admin works!</p>
+<app-developer-list></app-developer-list>

ADD
src/app/admin/developer-list.component.html
+<mat-nav-list>
+ <mat-list-item *ngFor="let developer of developers"> {{ developer.name }}</mat-list-item>
+</mat-nav-list>

ADD
src/app/admin/developer-list.component.scss
src/app/admin/developer-list.component.scss
ADD
src/app/admin/developer-list.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeveloperListComponent } from './developer-list.component';
+
+describe('DeveloperListComponent', () => {
+ let component: DeveloperListComponent;
+ let fixture: ComponentFixture<DeveloperListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DeveloperListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DeveloperListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/admin/developer-list.component.ts
+import { Component, OnInit } from '@angular/core';
+import {ApiDataService, ClientMapping, Developer} from '../api-data.service';
+import {mergeAll, mergeMap} from 'rxjs/operators';
+
+@Component({
+ selector: 'app-developer-list',
+ templateUrl: './developer-list.component.html',
+ styleUrls: ['./developer-list.component.scss']
+})
+export class DeveloperListComponent implements OnInit {
+
+ developers: Array<Developer> = [];
+
+ constructor(private apiDataService: ApiDataService) { }
+
+ ngOnInit() {
+ this.load();
+ }
+
+ public load() {
+ this.apiDataService.getAllDevelopers().pipe(mergeAll()).subscribe((developers) => {
+ this.developers.push(developers);
+ });
+ }
+
+}

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -7,17 +7,19 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatIconModule } from '@angular/material/icon';
-import { ApiListComponent } from './api-list/api-list.component';
+import { MatIconModule } from '@angular/material/';
+import { MatListModule } from '@angular/material/list';
+import { ApiListComponent } from './api-list/api-list.component';
import { MatTableModule } from '@angular/material/table';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
import { KeycloakService, KeycloakAngularModule } from 'keycloak-angular';
import { initializer } from './app-init';
import {environment} from '../environments/environment';
import { AdminComponent } from './admin/admin.component';
import { DeveloperComponent } from './developer/developer.component';
+import { DeveloperListComponent } from './admin/developer-list.component';
@NgModule({
@@ -26,7 +28,8 @@ import { DeveloperComponent } from './developer/developer.component';
PasHeaderComponent,
ApiListComponent,
AdminComponent,
- DeveloperComponent
+ DeveloperComponent,
+ DeveloperListComponent
],
imports: [
BrowserModule,
@@ -35,7 +38,8 @@ import { DeveloperComponent } from './developer/developer.component';
MatIconModule,
MatTableModule,
HttpClientModule,
- KeycloakAngularModule
+ KeycloakAngularModule,
+ MatListModule
],
providers: [
{

GW-263: Developer List Element