Merge pull request #222 from ashwin-sureshkumar/issue-10

Implement showcase of companies using RxJS

Author: ladyleet

src/app/companies/companies-list.ts

@@ -0,0 +1,16 @@
+import { Company } from './companies.model';
+
+export const COMPANIES_LIST: Company[] = [
+  {
+    name: 'Google',
+    location: 'California',
+    logo: '../../assets/companies/google.png',
+    website: 'http://google.com'
+  },
+  {
+    name: 'Microsoft',
+    location: 'Seattle',
+    logo: '../../assets/companies/microsoft.png',
+    website: 'http://microsoft.com'
+  }
+];

src/app/companies/companies.component.html

@@ -1 +1,21 @@
+<div fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="10px" fxLayoutWrap class="companies-container">
+  <mat-card *ngFor="let company of companies | async" fxFlex.xs="100" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23">
+    <mat-card-header>
+      <div mat-card-avatar>
+        <img [src]="company.logo" class="company-logo">
+      </div>
+      <mat-card-title>{{company.name}}</mat-card-title>
+      <mat-card-subtitle>
+        {{company.location}}
+        <a class="website-button" mat-icon-button aria-label="website" [href]="company.website" target="_blank">
+          <mat-icon>
+            link
+          </mat-icon>
+        </a>
+      </mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
 
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/companies/companies.component.scss

@@ -0,0 +1,27 @@
+.example-header-image {
+  background-image: url('../../assets/img/Rx_Logo-96-96.png');
+  background-size: cover;
+}
+
+.companies-container {
+  margin: 0 15px;
+}
+
+.website-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+mat-card {
+  margin-top: 15px;
+}
+
+mat-card-avatar {
+  margin-right: 10px;
+}
+
+.company-logo{
+  height: 40px;
+  width: 40px;
+}

src/app/companies/companies.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { COMPANIES_LIST } from './companies-list';
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { MatDialog } from '@angular/material';
+
+import { CompanyService } from './company.service';
+import { Company } from './companies.model';
 
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
   styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent {
-  constructor() {}
+  companies: Observable<Company[]>;
+  constructor(private companyService: CompanyService) {
+    this.companies = this.companyService.getCompanies();
+  }
 }

src/app/companies/companies.model.ts

@@ -0,0 +1,6 @@
+export interface Company {
+  name: string;
+  location: string;
+  website: string;
+  logo: string;
+}

src/app/companies/companies.module.ts

@@ -1,9 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from './../material/material.module';
 import { NgModule } from '@angular/core';
+
 import { CompaniesComponent } from './companies.component';
 import { CompaniesRoutingModule } from './companies-routing.module';
-
+import { environment } from '../../environments/environment';
+import { CompanyService } from './company.service';
 @NgModule({
-  imports: [CompaniesRoutingModule],
-  declarations: [CompaniesComponent]
+  imports: [CommonModule, CompaniesRoutingModule, MaterialModule],
+  declarations: [CompaniesComponent],
+  providers: [CompanyService]
 })
 export class CompaniesModule {}

src/app/companies/company.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { CompanyService } from './company.service';
+import { environment } from '../../environments/environment';
+
+describe('CompanyService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: [CompanyService]
+    });
+  });
+
+  it(
+    'should be created',
+    inject([CompanyService], (service: CompanyService) => {
+      expect(service).toBeTruthy();
+    })
+  );
+});

src/app/companies/company.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { COMPANIES_LIST } from './companies-list';
+import { Company } from './companies.model';
+
+@Injectable()
+export class CompanyService {
+  getCompanies(): Observable<Company[]> {
+    return of(COMPANIES_LIST);
+  }
+}

src/app/material/material.module.ts

@@ -4,9 +4,9 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   MatToolbarModule,
   MatIconModule,
+  MatButtonModule,
   MatListModule,
   MatSidenavModule,
-  MatButtonModule,
   MatExpansionModule,
   MatCardModule,
   MatInputModule,
@@ -20,27 +20,29 @@ import {
   imports: [
     MatToolbarModule,
     MatIconModule,
+    MatButtonModule,
     MatListModule,
     MatSidenavModule,
-    MatButtonModule,
     MatExpansionModule,
     MatCardModule,
     MatInputModule,
     MatMenuModule,
     MatTooltipModule,
+    FlexLayoutModule,
     MatSnackBarModule
   ],
   exports: [
     MatToolbarModule,
     MatIconModule,
+    MatButtonModule,
     MatListModule,
     MatSidenavModule,
-    MatButtonModule,
     MatExpansionModule,
     MatCardModule,
     MatInputModule,
     MatMenuModule,
     MatTooltipModule,
+    FlexLayoutModule,
     MatSnackBarModule
   ]
 })