Added routing to marketplace.component and marketplace-api-details.component
MODIFY
src/app/app-routing.module.ts
src/app/app-routing.module.ts
@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {HomeComponent} from "./components/home/home.component";
import {MarketplaceApiDetailsComponent} from "./components/marketplace-api-details/marketplace-api-details.component";
+import {MarketplaceComponent} from "./components/marketplace/marketplace.component";
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
- {path: 'api-details', component: MarketplaceApiDetailsComponent}
+ {path: 'marketplace', component: MarketplaceComponent},
+ {path: 'api-details/:id', component: MarketplaceApiDetailsComponent}
];
@NgModule({

MODIFY
src/app/app.component.html
src/app/app.component.html
<router-outlet></router-outlet>
</div>
-<app-marketplace-api-details></app-marketplace-api-details>
-<app-marketplace-signup-stepper></app-marketplace-signup-stepper>
-
<app-footer></app-footer>

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -28,6 +28,7 @@ import { MarketplaceApiConfirmationComponent } from './components/marketplace-ap
import {ClipboardModule} from "@angular/cdk/clipboard";
import { MarketplaceApiDescriptionComponent } from './components/marketplace-api-description/marketplace-api-description.component';
import { PlanCardComponent } from './components/plan-card/plan-card.component';
+import { MarketplaceComponent } from './components/marketplace/marketplace.component';
@NgModule({
declarations: [
@@ -43,7 +44,8 @@ import { PlanCardComponent } from './components/plan-card/plan-card.component';
MarketplaceApiPoliciesComponent,
MarketplaceApiConfirmationComponent,
MarketplaceApiDescriptionComponent,
- PlanCardComponent
+ PlanCardComponent,
+ MarketplaceComponent
],
imports: [
BrowserModule,

MODIFY
src/app/components/home/home.component.html
src/app/components/home/home.component.html
<div class="home-container">
<h2>Featured APIs</h2>
<app-card-list [cardType]="'api'" [listType]="'featuredApi'"></app-card-list>
- <!-- To-Do -->
- <!-- Add 'Show All' Button with route to Marketplace -->
+ <button mat-raised-button color="primary" style="float: right; margin-top: 1%" [routerLink]="['/marketplace']">Show All</button>
</div>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<mat-card>
<mat-card-header>
- <img mat-card-avatar alt="Logo" src="https://github.com/apiman/apiman/raw/master/manager/ui/war/plugins/api-manager/img/about-logo.png">
- <mat-card-title>Apiman API</mat-card-title>
- <mat-card-subtitle>The API Manager REST API is used by the API Manager UI to get stuff done. You can use it to automate any API Management task you wish. For example, create new Organizations, Plans, Clients, and APIs.</mat-card-subtitle>
+ <img mat-card-avatar alt="Logo" src={{api.icon}}>
+ <mat-card-title>{{api.title}}</mat-card-title>
+ <mat-card-subtitle>{{api.shortDescription}}</mat-card-subtitle>
</mat-card-header>
</mat-card>
<mat-grid-list cols="3" rowHeight="1:1">
<mat-grid-tile colspan="2" class="grid-content">
<div class="box">
- <markdown [data]="markdown"></markdown>
+ <markdown [data]="api.longDescription"></markdown>
</div>
</mat-grid-tile>
<mat-grid-tile colspan="1" class="grid-content">
<div class="box">
<h1>Key Features</h1>
<mat-list>
+ <!--To-Do-->
+ <!--Use features of API instead of hard-coded value-->
<mat-list-item *ngFor="let feature of features">
<mat-icon matListIcon>folder</mat-icon>
<span>{{feature}}</span>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Api} from "../../interfaces/api";
@Component({
selector: 'app-marketplace-api-description',
@@ -7,54 +8,16 @@ import { Component, OnInit } from '@angular/core';
})
export class MarketplaceApiDescriptionComponent implements OnInit {
+ @Input() api: Api = {
+ id: "",
+ title: "",
+ shortDescription: "",
+ longDescription: "",
+ featuredApi: false,
+ icon: ""
+ };
+
features: string[] = ['fast', 'free', 'fancy features']
- markdown: string = '# In inmotae messes et tamen sustinuit fieri\n' +
- '\n' +
- '## Iam nataque prospexit\n' +
- '\n' +
- 'Lorem markdownum accingere levatae inspicitur leve Nereides offensa *renidenti\n' +
- 'deflent illis* licet operum sonitum descendere multo, errorem nec ille. Monstra\n' +
- 'superest, si negat diebus alimenta vibrantia aderas loquendo in nec **bicorni**\n' +
- 'advena dixit herosmaxime adpulit arduus dum!\n' +
- '\n' +
- '1. Cristis vetus totumque celeremque creber sacris et\n' +
- '2. Care membra positis centum\n' +
- '3. Sparsitque Bacchus\n' +
- '4. Ausim dixi vittam orbem\n' +
- '5. Tempora pars mutua Oceano soporiferam Iove imis\n' +
- '6. Quem metus\n' +
- '\n' +
- 'Se vitae, sede visus illa, virgaque amnis matris protinus parentis se furor\n' +
- 'quotiens, tempora. Nec iuro et fieri et flere redit opta arma et quidem\n' +
- '[plurimus](http://negat.org/) cuius. Palustris Bromumque transformat tu virtus\n' +
- 'tritumque armat formam iube varias crudelesque dedit. Supplex ipse, omnes neque\n' +
- 'Haemoniam ipsoque sanguine mox suppressa montes. Cervos renuente, pavor aere\n' +
- 'durat revocata?\n' +
- '\n' +
- ' var ios = -2;\n' +
- ' fileItunesSchema = software;\n' +
- ' cold_meta_wimax += boxExpansion - ribbonWord * version_ripcording_os(\n' +
- ' languageHyperlinkStatus);\n' +
- '\n' +
- '## De pastor natos refluum\n' +
- '\n' +
- 'Et ora, est et moderere intra procorum, suam ut instare nam. Obstipuere\n' +
- '**secundi vertice**. Levavit cum molitur caput dederat lumina.\n' +
- '\n' +
- '1. Ibat pependit auguris quid\n' +
- '2. Lupos vietum\n' +
- '3. Rerum sumptis percusso texitur ferrum novitatis quodque\n' +
- '\n' +
- 'Producet fluentia prope Titania extenuatur Arethusa corpora *tela geras reddita*\n' +
- 'fallaces sola tibi et admonitu, formosior. Suos reduxit *supremo* amicius!\n' +
- '\n' +
- '> Regione magorum iuvenis latosque coeunt: necis enim,\n' +
- '> [Theseu](http://www.exsiccata-vultu.net/) Arethusae vincat *altera carcere*\n' +
- '> vetito tenetque regales, leonem? Praestiteris alas: sagitta satis sua retexit\n' +
- '> restare amore aliquis montesque. Quoque egressa exhalat inque; si Procris?\n' +
- '\n' +
- 'Inplevere maior. Ubi aut supplicium Averna, ciet percussis Praebuimus saepe\n' +
- 'fugisse quae est: a.'
constructor() { }

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.html
src/app/components/marketplace-api-details/marketplace-api-details.component.html
<h1>Details Page</h1>
-<app-marketplace-api-description></app-marketplace-api-description>
+<app-marketplace-api-description [api]="getApi()"></app-marketplace-api-description>
<h2>Plans</h2>
<app-card-list [cardType]="'plan'"></app-card-list>

MODIFY
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
src/app/components/marketplace-api-details/marketplace-api-details.component.ts
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {ApiService} from "../../services/api/api.service";
+import {Api} from "../../interfaces/api";
@Component({
selector: 'app-marketplace-api-details',
@@ -7,9 +10,29 @@ import { Component, OnInit } from '@angular/core';
})
export class MarketplaceApiDetailsComponent implements OnInit {
- constructor() { }
+ @Input() id: string = "";
+
+ api: Api = {
+ id: "",
+ title: "",
+ shortDescription: "",
+ longDescription: "",
+ featuredApi: false,
+ icon: ""
+ };
+
+ constructor(private route: ActivatedRoute,
+ private apiService: ApiService) { }
ngOnInit(): void {
+ // this.getApi();
+ // console.log(this.api);
}
+ getApi(): Api {
+ const id = this.route.snapshot.paramMap.get('id');
+ this.apiService.getApi(id)
+ .subscribe(api => this.api = api!);
+ return this.api
+ };
}

ADD
src/app/components/marketplace/marketplace.component.html
+<h2>Marketplace</h2>
+<app-card-list [cardType]="'api'" [listType]="'api'"></app-card-list>

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

ADD
src/app/components/marketplace/marketplace.component.ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-marketplace',
+ templateUrl: './marketplace.component.html',
+ styleUrls: ['./marketplace.component.sass']
+})
+export class MarketplaceComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}

MODIFY
src/app/services/api/api.service.ts
src/app/services/api/api.service.ts
@@ -14,7 +14,7 @@ export class ApiService {
return this.getApis().pipe(map(apis => apis.filter(api => api.featuredApi)));
}
- getApi(id: string): Observable<Api | undefined> {
+ getApi(id: string | null): Observable<Api | undefined> {
const api = this.getApis().pipe(
map(apis => apis.find(api => api.id === id))
);

Added routing to marketplace.component and marketplace-api-details.component