get team member information for about page from json. add buttons for github and linkedin profiles to team member cards

src/app/about-us/about-us.component.html

@@ -37,30 +37,28 @@
       fxLayout.lt-md="column"
       fxLayoutGap="2%"
     >
-      <mat-card>
+      <div *ngFor="let t of teamMembers">
-        <div class="circle-img">
+        <mat-card>
-          <img src="../../assets/images/staunton_old_map.jpg">
+          <div class="circle-img">
-        </div>
+            <img src="{{ t.imageLink }}">
-        <h2>Dan Funk</h2>
+          </div>
-        <h3>Owner, Lead Developer</h3>
+          <h2>{{ t.name }}</h2>
-        <p>I am a successful, battle proven, software engineer with a gift for conveying complex technical information.</p>
+          <h3>{{ t.title }}</h3>
-      </mat-card>
+          <p>{{ t.description }}</p>
-      <mat-card>
+          <button
-        <div class="circle-img">
+            *ngIf="t.gitHubLink"
-          <img src="../../assets/images/compass.jpg">
+            (click)="goWebsite(t.gitHubLink)"
-        </div>
+          >
-        <h2>Aaron Louie</h2>
+            GitHub
-        <h3>Senior Developer</h3>
+          </button>
-        <p>I am a successful, battle proven, software engineer with a gift for conveying complex technical information.</p>
+          <button
-      </mat-card>
+            *ngIf="t.linkedInLink"
-      <mat-card>
+            (click)="goWebsite(t.linkedInLink)"
-        <div class="circle-img">
+          >
-          <img src="../../assets/images/astro_clock.jpg">
+            LinkedIn
-        </div>
+          </button>
-        <h2>Eleanor Graham</h2>
+        </mat-card>
-        <h3>Developer</h3>
+      </div>
-        <p>I am a successful, battle proven, software engineer with a gift for conveying complex technical information.</p>
-      </mat-card>
     </div>
   </div>
   <div fxLayoutAlign="center center">

src/app/about-us/about-us.component.scss

@@ -15,6 +15,14 @@
     padding: 2%;
   }
 
+  button {
+    margin: 2%;
+    padding: 3%;
+    background-color: mat-color($sartography-warn, 500);
+    color: mat-contrast($sartography-warn, 500);
+    cursor: pointer;
+  }
+
   mat-card {
     padding: 5%;
 

src/app/about-us/about-us.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { TeamMember } from '../interfaces';
+import { ApiService } from '../api.service';
 
 @Component({
   selector: 'app-about-us',
@@ -6,10 +8,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./about-us.component.scss']
 })
 export class AboutUsComponent implements OnInit {
+  teamMembers: TeamMember[];
 
-  constructor() { }
+  constructor(
+    private api: ApiService
+  ) { }
 
   ngOnInit() {
+    this.api.getTeamMembers().subscribe(team => {
+      this.teamMembers = team;
+    });
+  }
+
+  goWebsite(link: string) {
+    window.open(link, '_blank');
   }
 
 }