Split catalog into its own component

src/app/app.component.html

@@ -16,7 +16,7 @@
                     <a class="nav-link text-dark" [routerLink]="['/about']">About</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link text-dark" [routerLink]="['/store']">Store</a>
+                    <a class="nav-link text-dark" [routerLink]="['/catalog']">Catalog</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>

src/app/app.module.ts

@@ -33,6 +33,7 @@ import {HttpClientModule} from '@angular/common/http';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {MSDSComponent} from './msds/msds.component';
 import {SizePipe} from './size.pipe';
+import {CatalogComponent} from "./catalog/catalog.component";
 
 @NgModule({
     declarations: [
@@ -40,6 +41,7 @@ import {SizePipe} from './size.pipe';
         AppComponent,
         CategoriesComponent,
         CartComponent,
+        CatalogComponent,
         ConvertFromGPipe,
         ConvertToGPipe,
         DeleteComponent,
@@ -71,6 +73,7 @@ import {SizePipe} from './size.pipe';
         RouterModule.forRoot([
             {path: 'about', component: AboutComponent},
             {path: 'cart', component: CartComponent},
+            {path: 'catalog', component: CatalogComponent},
             {path: 'formulaManager', component: FormulaManagerComponent},
             {path: 'msds', component: MSDSComponent},
             {path: 'products/:product', component: ProductsComponent},

src/app/catalog/catalog.component.html

@@ -0,0 +1 @@
+<iframe class="w-100 border-0" [src]="trust('https://screenprintingsuppliescanada.com')" style="height: 100vh"></iframe>

src/app/catalog/catalog.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {DomSanitizer} from "@angular/platform-browser";
+
+@Component({
+    selector: 'catalog',
+    templateUrl: 'catalog.component.html'
+})
+export class CatalogComponent implements OnInit{
+
+    constructor(private http: HttpClient, private sanatize: DomSanitizer) {}
+
+    ngOnInit() {}
+
+    trust(url) { return this.sanatize.bypassSecurityTrustResourceUrl(url); }
+}

src/app/store/categories.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {map} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {MatDialog} from '@angular/material';
@@ -10,13 +10,12 @@ import {AppStore} from '../app.store';
 import {Category} from './category';
 import {Observable} from 'rxjs';
 import {Product} from './product';
-import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
   selector: 'store',
   templateUrl: 'categories.component.html'
 })
-export class CategoriesComponent {
+export class CategoriesComponent implements OnInit{
   category: string;
   categories: Observable<Category[]>;
   products: Observable<Product[]>;
@@ -26,7 +25,6 @@ export class CategoriesComponent {
     private dialog: MatDialog,
     public app: AppComponent,
     public store: AppStore,
-    private sanatize: DomSanitizer
   ) {}
 
   ngOnInit() {
@@ -50,6 +48,4 @@ export class CategoriesComponent {
   delete(obj) {
     this.dialog.open(DeleteComponent, {data: obj});
   }
-
-  trust(url) { return this.sanatize.bypassSecurityTrustResourceUrl(url); }
 }