Read team.json and view team in home page

Author: janethavi

src/app/components/components.module.ts

@@ -8,7 +8,7 @@ import { RouterModule } from '@angular/router';
 
 import { BasicelementsComponent } from './basicelements/basicelements.component';
 import { NavigationComponent } from './navigation/navigation.component';
-import { TypographyComponent } from './typography/typography.component';
+import { TeamSectionComponent } from './teamSection/teamSection.component';
 import { NucleoiconsComponent } from './nucleoicons/nucleoicons.component';
 import { ComponentsComponent } from './components.component';
 import { NotificationComponent } from './notification/notification.component';
@@ -28,7 +28,7 @@ import { NgbdModalContent } from './modal/modal.component';
         ComponentsComponent,
         BasicelementsComponent,
         NavigationComponent,
-        TypographyComponent,
+        TeamSectionComponent,
         NucleoiconsComponent,
         NotificationComponent,
         NgbdModalComponent,

src/app/components/teamSection/teamSection.component.html

@@ -0,0 +1,25 @@
+<div class="section">
+    <div class="section section-dark">
+        <div class="container">
+            <div class="col-md-auto">
+                <h2 class="title">Team Members</h2>
+            </div>
+        </div>
+        <br>
+        <div class="container">
+            <div class="row justify-content-center">
+                <div *ngFor="let teamMember of teamMembers">
+                    <div class="col-sm-auto">
+                        <div class="hover-profile-card">
+                            <img src="assets/img/faces/{{teamMember.image}}"
+                                 class="rounded-circle img-center img-fluid shadow shadow-lg--hover imgHover">
+                            <h5 class="title" style="text-align: center;">
+                                <div class="firstName">{{teamMember.firstName}}</div>
+                            </h5>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/teamSection/teamSection.component.scss

@@ -0,0 +1,20 @@
+.hover-profile-card {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: auto;
+    transition: .5s ease;
+    backface-visibility: hidden;
+}
+
+.hover-profile-card .imgHover {
+    width: 150px;
+}
+
+.hover-profile-card:hover .imgHover {
+    opacity: 0.3;
+}
+
+.hover-profile-card:hover .imgIcon {
+    opacity: 1;
+}

src/app/components/typography/typography.component.spec.ts renamed to src/app/components/teamSection/teamSection.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TypographyComponent } from './typography.component';
+import { TeamSectionComponent } from './teamSection.component';
 
-describe('TypographyComponent', () => {
-  let component: TypographyComponent;
-  let fixture: ComponentFixture<TypographyComponent>;
+describe('TeamSectionComponent', () => {
+  let component: TeamSectionComponent;
+  let fixture: ComponentFixture<TeamSectionComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TypographyComponent ]
+      declarations: [ TeamSectionComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TypographyComponent);
+    fixture = TestBed.createComponent(TeamSectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/teamSection/teamSection.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import teamMembers from '../../../assets/json/team.json';
+
+@Component({
+    selector: 'app-typography',
+    templateUrl: './teamSection.component.html',
+    styleUrls: ['./teamSection.component.scss']
+})
+export class TeamSectionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+      teamMembers: any = teamMembers;
+}

src/app/components/typography/typography.component.html

@@ -3,6 +3,8 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "es2015",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
     "baseUrl": "",
     "types": []
   },

src/app/components/typography/typography.component.scss

@@ -3,3 +3,7 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+declare module "*.json" {
+   const value: any;
+   export default value;
+}