Angular Universal Course

Author: jhades

src/app/about/about.component.css

@@ -0,0 +1,19 @@
+
+.course-image {
+  max-width: 300px;
+  border-radius: 4px;
+}
+
+
+.not-found {
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  font-family: "Roboto";
+}
+
+
+.about button {
+  max-width: 100px;
+  margin-top: 30px;
+}

src/app/about/about.component.html

@@ -0,0 +1,14 @@
+
+
+<div class="not-found">
+
+    <h1>Angular Universal In Depth</h1>
+
+    <img class="course-image mat-elevation-z10"
+         src="https://angular-university.s3-us-west-1.amazonaws.com/course-images/angular-universal-course.jpg">
+
+    <h2>About this course</h2>
+    <p>Use Angular on the server too! Learn Angular Server-Side Rendering.</p>
+
+</div>
+

src/app/about/about.component.ts

@@ -0,0 +1,47 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {
+  concat,
+  fromEvent,
+  interval,
+  noop,
+  observable,
+  Observable,
+  of,
+  timer,
+  merge,
+  Subject,
+  BehaviorSubject,
+  AsyncSubject,
+  ReplaySubject, from
+} from 'rxjs';
+import {delayWhen, filter, map, take, timeout} from 'rxjs/operators';
+
+
+
+@Component({
+    selector: 'about',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+    ngOnInit() {
+
+
+    }
+
+
+  run() {
+
+
+
+  }
+
+
+}
+
+
+
+
+
+

src/app/app-routing.module.ts

@@ -3,13 +3,18 @@ import { Routes, RouterModule } from '@angular/router';
 import {HomeComponent} from "./home/home.component";
 import {CourseComponent} from "./course/course.component";
 import {CourseResolver} from "./services/course.resolver";
+import {AboutComponent} from './about/about.component';
 
 const routes: Routes = [
     {
         path: "",
         component: HomeComponent
 
     },
+    {
+        path: 'about',
+        component: AboutComponent
+    },
     {
         path: 'courses/:id',
         component: CourseComponent,

src/app/app.component.html

@@ -1,13 +1,18 @@
 <mat-sidenav-container fullscreen>
 
-    <mat-sidenav #start>
+    <mat-sidenav #start (click)="start.close()">
+
         <mat-nav-list>
 
             <a mat-list-item routerLink="/">
                 <mat-icon>library_books</mat-icon>
                 <span>Courses</span>
             </a>
 
+            <a mat-list-item routerLink="/about">
+                <span>About</span>
+            </a>
+
             <a mat-list-item>
                 <mat-icon>person_add</mat-icon>
                 <span>Register</span>
@@ -32,4 +37,4 @@
         <router-outlet></router-outlet>
 
 
-</mat-sidenav-container>
+</mat-sidenav-container>

src/app/app.component.spec.ts

@@ -29,6 +29,7 @@ import { CourseDialogComponent } from './course-dialog/course-dialog.component';
 import {ReactiveFormsModule} from "@angular/forms";
 import {MatMomentDateModule} from "@angular/material-moment-adapter";
 import { HttpClientModule} from '@angular/common/http';
+import {AboutComponent} from './about/about.component';
 
 
 
@@ -41,6 +42,7 @@ import { HttpClientModule} from '@angular/common/http';
         CourseComponent,
         CoursesCardListComponent,
         CourseDialogComponent,
+        AboutComponent
     ],
     imports: [
         BrowserModule,