update media gallery

Author: rxzx

src/app/private/about/about.component.html

@@ -1,6 +1,7 @@
 <div class="container">
   <div class="row">
-    <h2>About Us</h2>
+    <h2>Data Charts</h2>
+    <hr>
     <div class="col-md-12">
 
     </div>

src/app/private/gallery/gallery.component.css

@@ -0,0 +1,13 @@
+
+
+.thumbImage{
+    width: 200px;
+    height: 200px;
+    margin-bottom: 15%;
+}
+
+.videoItem{
+    width: 200px;
+    height: 200px;
+    margin-bottom: 5%;
+}

src/app/private/gallery/gallery.component.html

@@ -1,8 +1,24 @@
-<div class="container">
+<div id="mediaGallery" class="container">
   <div class="row">
-    <h2>Gallery</h2>
+    <h2> Image Gallery</h2>
+    <hr>
     <div class="col-md-12">
-      <div [innerHtml]="iframe_html"></div>
+      <div class="col-md-3" *ngFor="let i of urls">
+        <img [src]="i" class="thumbImage">
+      </div>
     </div>
   </div>
+  <hr>
+  <div class="row">
+    <h2> Video Gallery</h2>
+    <hr>
+    <div class="col-md-12">
+      <div class="col-md-4" *ngFor="let f of iframes">
+          <div [innerHtml]="f" class="videoItem"></div> 
+      </div>
+      <!-- <div [innerHtml]="iframe_html"></div> -->
+    </div>
+  </div>
+
+
 </div>

src/app/private/gallery/gallery.component.ts

@@ -10,6 +10,10 @@ export class GalleryComponent implements OnInit {
   public iframe_html:any;
   public vimeoUrl = "https://vimeo.com/197933516";
   public images:any;
+  public urls:string[] = [];
+  public videoUrls:string[] = [];
+  public iframes:any;
+
   constructor(
     private embedService: EmbedVideoService
   ) { 
@@ -31,6 +35,30 @@ export class GalleryComponent implements OnInit {
         url:'../../assets/images/3.png',
       },
     ]
+
+    this.urls = [
+      "../../assets/images/1.jpg",
+      "../../assets/images/2.jpg",
+      "../../assets/images/3.jpg",
+      "../../assets/images/1.jpg",
+      "../../assets/images/2.jpg",
+      "../../assets/images/3.jpg"
+    ];
+
+    this.videoUrls = [
+      "https://www.youtube.com/watch?v=HgBFtoiEsh4",
+      "https://vimeo.com/197933516",
+      "https://www.youtube.com/watch?v=kstz-XYdas0",
+      "https://www.youtube.com/watch?v=HgBFtoiEsh4",
+      "https://vimeo.com/197933516",
+      "https://www.youtube.com/watch?v=kstz-XYdas0"
+    ];
+
+    this.iframes = [];
+
+    this.videoUrls.forEach( (item) =>{
+      this.iframes.push(this.embedService.embed(item));
+    });
 
   }
 

src/app/private/header/header.component.html

@@ -29,16 +29,16 @@ <h2><i class="fas fa-home"></i> Admin Panel</h2>
     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav">
         <li [routerLinkActive]="['active']" [routerLink]="['/user/home']">
-          <a>Home</a>
+          <a>Data Grid</a>
         </li>
         <li [routerLinkActive]="['active']" [routerLink]="['/user/demo-charts']">
           <a>Charts</a>
         </li>
         <li [routerLinkActive]="['active']" [routerLink]="['/user/about']">
-          <a>About</a>
+          <a>Data Charts</a>
         </li>
-        <li>
-          <a [routerLinkActive]="['active']" [routerLink]="['/user/gallery']">Gallery</a>
+        <li [routerLinkActive]="['active']" [routerLink]="['/user/gallery']">
+          <a>Media Gallery</a>
         </li>
         <li>
           <a href="javascript:;">Contact</a>