Clean up admin modules

Author: alex-bu-93

apps/codelab/src/app/admin/admin.component.css renamed to apps/codelab/src/app/admin/admin-layout/admin-layout.component.css

@@ -1,6 +1,6 @@
 <mat-card appearance="outlined">
   <h2>Angular Codelab 🔥 Admin</h2>
-  <nav mat-tab-nav-bar>
+  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
     <a *ngFor="let link of ['users', 'feedback', 'content',]"
        mat-tab-link
        routerLinkActive
@@ -10,5 +10,6 @@ <h2>Angular Codelab 🔥 Admin</h2>
       {{ link | titlecase }}
     </a>
   </nav>
+  <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
   <router-outlet></router-outlet>
 </mat-card>

apps/codelab/src/app/admin/admin.component.html renamed to apps/codelab/src/app/admin/admin-layout/admin-layout.component.html

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'slides-admin-layout',
+  templateUrl: './admin-layout.component.html',
+  styleUrls: ['./admin-layout.component.css']
+})
+export class AdminLayoutComponent {
+
+}

apps/codelab/src/app/admin/admin-layout/admin-layout.component.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { AdminLayoutComponent } from './admin-layout.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatTabsModule,
+    RouterModule
+  ],
+  declarations: [AdminLayoutComponent]
+})
+export class AdminLayoutModule {
+}

apps/codelab/src/app/admin/admin-layout/admin-layout.module.ts

@@ -0,0 +1,2 @@
+export * from './admin-layout.component';
+export * from './admin-layout.module';

apps/codelab/src/app/admin/admin-layout/index.ts

@@ -1,18 +1,32 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatTabsModule } from '@angular/material/tabs';
-import { AdminComponent } from './admin.component';
-import { AdminRoutingModule } from './admin-routing.module';
+import { RouterModule, Routes } from '@angular/router';
+import { UsersComponent, UsersModule } from './pages/users';
+import { FeedbackComponent, FeedbackModule } from './pages/feedback';
+import { AdminLayoutComponent, AdminLayoutModule } from './admin-layout';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AdminLayoutComponent,
+    children: [
+      {path: 'users', component: UsersComponent},
+      {path: 'feedback', component: FeedbackComponent},
+    ],
+  },
+  {
+    path: 'content',
+    loadChildren: () => import('./pages/content').then(m => m.ContentModule)
+  },
+];
+
 
 @NgModule({
   imports: [
-    CommonModule,
-    AdminRoutingModule,
-    MatCardModule,
-    MatTabsModule
-  ],
-  declarations: [AdminComponent]
+    AdminLayoutModule,
+    UsersModule,
+    FeedbackModule,
+    RouterModule.forChild(routes)
+  ]
 })
 export class AdminModule {
 }