Dynamic API API loader

src/app/app.component.html

@@ -1,5 +1,9 @@
 <!--The whole content below can be removed with the new code.-->
 <app-header [title]="title" [menu]="menu" (toggleSidebar)="toggleSidenav()"></app-header>
+Dynamic menu of coolness:
+<div *ngFor="let item of dynamicMenu | async">
+  <div [routerLink]="[item.key]">{{item.key}}</div>
+</div>
 <md-sidenav-container>
   <md-sidenav #sidenav [mode]="'over'" class="sidenav">
     <app-sidenav [menu]="menu" (onRouteChange)="toggleSidenav()"></app-sidenav>

src/app/app.component.ts

@@ -1,6 +1,10 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { MaterialIconsService } from './services/material-icons/material-icons.service';
+import { Observable } from 'rxjs/Observable';
+import { Http } from '@angular/http';
+
+import { makeList } from './shared/stephen';
 
 @Component({
   selector: 'app-root',
@@ -12,7 +16,16 @@ export class AppComponent implements OnInit {
   @ViewChild('sidenav') sidenav: MdSidenav;
   menu: Object[] = [{ name: 'Home', url: '', icon: 'home' },{ name: 'Features', url: './features', icon: 'settings' }, { name: 'Recipes', url: './recipes', icon: 'room_service' }];
 
-  constructor(private materialIconsService: MaterialIconsService) {}
+  dynamicMenu: Observable<any[]>;
+
+  constructor(private materialIconsService: MaterialIconsService,
+  http: Http) {
+    this.dynamicMenu = http.get('https://dev-contentacms.pantheonsite.io/api').map(res => res.json().links)
+    .map(obj => {
+      return makeList(obj);
+    });
+
+  }
 
   ngOnInit() {
     this.materialIconsService.registerIcons();

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { HomeComponent } from './components/home/home.component';
 import { recipesReducer } from './store/recipes.store';
 import { FeaturesComponent } from './components/features/features.component';
+import { DynamicComponent } from './dynamic/dynamic.component';
 
 let rootReducer = { recipes: recipesReducer };
 
@@ -20,7 +21,8 @@ let rootReducer = { recipes: recipesReducer };
     HeaderComponent,
     SidenavComponent,
     HomeComponent,
-    FeaturesComponent
+    FeaturesComponent,
+    DynamicComponent
   ],
   imports: [
     BrowserModule,

src/app/app.routes.ts

@@ -1,9 +1,11 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { FeaturesComponent } from './components/features/features.component'
+import { DynamicComponent } from './dynamic/dynamic.component';
 
 export const routes: Routes = [
     { path: '', component: HomeComponent },
+    { path: ':key', component: DynamicComponent },
     { path: 'features', component: FeaturesComponent },
     { path: 'recipes', loadChildren: './components/recipe/recipe.module#RecipeModule' }
 ];

src/app/components/header/header.component.html

@@ -1,10 +1,10 @@
 <md-toolbar class="mat-elevation-z6" [color]="'accent'">
   <button class="sidenav-toggle" aria-label="Toggle Sidebar" (click)="toggleSidenav()">
-      <md-icon class="logo-icon" [svgIcon]="'logo'" alt="Contenta Logo" title="Contenta Logo"></md-icon>
+      <md-icon class="logo-icon" [svgIcon]="'logo'" title="Contenta Logo"></md-icon>
   </button>
   <span class="app-title">{{title}}</span>
   <div class="desktop-menu">
-    <a class="logo"><md-icon class="logo-icon" [svgIcon]="'logo'" alt="Contenta Logo" title="Contenta Logo"></md-icon></a>
+    <a class="logo"><md-icon class="logo-icon" [svgIcon]="'logo'"  title="Contenta Logo"></md-icon></a>
     <a *ngFor="let menu_item of menu; let i = index" class="menu-item" md-button [routerLink]="[menu_item.url]">{{menu_item.name}}</a>
     <span class="spacer"></span>
     <a href="https://github.com/contentacms/contenta_angular" target="_blank" rel="noopener" md-button class="github-logo"><img class="logo" src="/assets/github.png" alt="Github" title="Github"/>Github</a>

src/app/components/sidenav/sidenav.component.html

@@ -1,15 +1,15 @@
 <md-list class="sidenav-menu">
   <md-list-item *ngFor="let menu_item of menu; let i = index">
     <a class="sidenav-menu-item" md-button [routerLink]="[menu_item.url]" (click)="changeRoute()">
-      <md-icon [color]="'primary'" class="menu-item-icon" [svgIcon]="menu_item.icon" [alt]="menu_item.name" [title]="menu_item.name"></md-icon>
+      <md-icon [color]="'primary'" class="menu-item-icon" [svgIcon]="menu_item.icon" [title]="menu_item.name"></md-icon>
       <span>{{menu_item.name}}</span>
     </a>
   </md-list-item>
   <div class="separator"></div>
   <md-list-item>
     <a class="sidenav-menu-item" md-button href="https://github.com/contentacms/contenta_angular" target="_blank" (click)="changeRoute()">
-      <md-icon [color]="'secondary'" class="menu-item-icon" [svgIcon]="'code'" alt="Login" title="Login"></md-icon>
+      <md-icon [color]="'secondary'" class="menu-item-icon" [svgIcon]="'code'" title="Login"></md-icon>
       <span>Github</span>
     </a>
   </md-list-item>
-</md-list>
+</md-list>

src/app/dynamic/dynamic.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="itemContents | async as items">
+  <!--{{items | json}}-->
+  <div *ngFor="let item of items">
+    <!--{{item | json}}-->
+    <div *ngFor="let attrib of item.attributeList">
+      <strong>{{attrib.key}}:</strong><br/> <span [innerHTML]="attrib.value"></span>
+    </div>
+  </div>
+
+</div>
+<ng-template #loading>Loading items.</ng-template>

src/app/dynamic/dynamic.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicComponent } from './dynamic.component';
+
+describe('DynamicComponent', () => {
+  let component: DynamicComponent;
+  let fixture: ComponentFixture<DynamicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DynamicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dynamic/dynamic.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import { ActivatedRoute } from "@angular/router";
+import { makeList } from "app/shared/stephen";
+
+@Component({
+  selector: 'app-dynamic',
+  templateUrl: './dynamic.component.html',
+  styleUrls: ['./dynamic.component.scss']
+})
+export class DynamicComponent implements OnInit {
+  itemContents;
+
+  constructor(http: Http, route: ActivatedRoute) {
+    this.itemContents = route.params.switchMap(params =>
+      http.get(`https://dev-contentacms.pantheonsite.io/api/${params['key']}`)
+      .map(res => res.json().data)
+      .map(list => {
+        return list.map(obj => {
+          if(obj) {
+            console.log(obj);
+            obj.attributeList = makeList(obj.attributes);
+          }
+          return obj;
+        });
+      })
+    );
+  }
+
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/stephen.ts

@@ -0,0 +1,12 @@
+export function makeList(obj): any[] {
+  if(!obj) {
+    console.log("returning empty object",obj);
+    return [];
+  }
+  console.log("obj is", obj);
+  let list = [];
+  for (let key of Object.keys(obj)) {
+    list.push({ key: key, value: obj[key] });
+  }
+  return list;
+}