test

src/app/commons/ui/material/material.module.ts

@@ -9,6 +9,7 @@ import {
   MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
   MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule
 } from '@angular/material';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 const MATERIAL_MODULES: any[] = [
   MatButtonModule, MatCardModule, MatIconModule,
@@ -23,9 +24,11 @@ const MATERIAL_MODULES: any[] = [
 @NgModule({
   imports: [
     MATERIAL_MODULES,
+    FlexLayoutModule
   ],
   exports: [
     MATERIAL_MODULES,
+    FlexLayoutModule
   ],
 })
 export class MaterialModule { }

src/app/packages/probe/component/detail/detail.component.html

@@ -1,3 +1,59 @@
-<p>
+<div>{{probeId}}</div>
-  {{probeId}} detail 
+<button class="Follow " mat-raised-button color="primary">Status: UP</button>
-</p>
+
+<div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center">
+  <mat-card class="example-card" fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+    <mat-card-header>
+      <div mat-card-avatar class="example-header-image"></div>
+      <mat-card-title>Shiba Inu</mat-card-title>
+      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <p>
+        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
+        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card class="example-card" fxFlex="30" fxFlex.lt-sm="100" fxFlex.sm="30">
+    <mat-card-header>
+      <div mat-card-avatar class="example-header-image"></div>
+      <mat-card-title>Shiba Inu</mat-card-title>
+      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+      <p>
+        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
+        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
+      </p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-button>LIKE</button>
+      <button mat-button>SHARE</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <mat-card class="example-card" fxFlex="30" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <mat-card-header>
+        <div mat-card-avatar class="example-header-image"></div>
+        <mat-card-title>Shiba Inu</mat-card-title>
+        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <p>
+          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
+          very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
+        </p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button>LIKE</button>
+        <button mat-button>SHARE</button>
+      </mat-card-actions>
+    </mat-card>
+
+</div>

src/app/packages/probe/component/detail/detail.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
-  selector: 'of-detail',
+  selector: 'of-probe-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.scss']
 })

src/app/pages/pages.module.ts

@@ -8,7 +8,6 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
 import { HeaderComponent } from 'app/commons/layouts/header/header.component';
 import { FooterComponent } from 'app/commons/layouts/footer/footer.component';
 import { MenuItemComponent } from 'app/commons/layouts/menu-item/menu-item.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   PerfectScrollbarModule,
   PERFECT_SCROLLBAR_CONFIG,
@@ -28,7 +27,6 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     CovalentModule,
     MaterialModule,
     PerfectScrollbarModule,
-    FlexLayoutModule,
   ],
   declarations: [
     PagesComponent,
@@ -43,6 +41,6 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
       provide: PERFECT_SCROLLBAR_CONFIG,
       useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
     }
-  ]
+  ],
 })
 export class PagesModule { }

src/app/pages/probe/probe-page.module.ts

@@ -12,7 +12,7 @@ import { SubMenubarModule } from 'app/commons/layouts/sub-menubar/sub-menubar.mo
     ProbesPageRoutingModule,
     MaterialModule,
     ProbeModule,
-    SubMenubarModule
+    SubMenubarModule,
   ],
   declarations: [
     ProbePageComponent,