Added Basics page at /codelab

apps/codelab/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './components/login/login.component';
+import { BasicsComponent } from './components/basics/basics.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { AdminGuard } from './shared/services/guards/admin-guard';
 import { LoginGuard } from './shared/services/guards/login-guard';
@@ -26,6 +27,10 @@ const routes: Routes = [
     loadChildren: () =>
       import('./sync/sync.module').then(m => m.SyncAdminModule)
   },
+  {
+    path: 'codelab',
+    component: BasicsComponent
+  },
   { path: '**', component: NotFoundComponent }
 ];
 

apps/codelab/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { NotFoundModule } from './components/not-found/not-found.module';
 import { MatButtonModule } from '@angular/material/button';
 import { DirectivesModule } from './directives/directives.module';
 import { HttpClientModule } from '@angular/common/http';
+import { MaterialCodelabModule } from './codelabs/angular/material/material.module';
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { HttpClientModule } from '@angular/common/http';
     AngularFireDatabaseModule,
     NotFoundModule,
     MatButtonModule,
+    MaterialCodelabModule,
     DirectivesModule
   ],
   declarations: [AppComponent],

apps/codelab/src/app/components/basics/basics.component.html

@@ -0,0 +1,94 @@
+<div class="theme-basic">
+  <h1>Basics of Angular Codelab</h1>
+
+  <h2>Introduction</h2>
+  <p>
+    <a href="https://angular.io/" target="_blank">Angular</a> is a
+    <b>development platform</b> for building mobile and desktop apps. Angular
+    lets you <b>extend HTML's syntax</b> to express your apps’ components
+    clearly and succinctly. Angular's binding and dependency injection
+    <b>eliminate much of the code</b> you would otherwise have to write.
+  </p>
+
+  <h3>Benefits of Angular</h3>
+  <h4>Develop across all platforms</h4>
+  <p>
+    Learn one way to build apps with Angular and then reuse your code and
+    abilities to build apps for any deployment target, such as web, mobile web,
+    native mobile, and native desktop.
+  </p>
+  <h4>Speed and performance</h4>
+  <p>
+    Achieve the maximum speed possible on the web platform today, and take it
+    further, with Web Workers and server-side rendering. Angular puts you in
+    control of scalability. Meet huge data requirements by building data models
+    using RxJS, Immutable.js, or another push model.
+  </p>
+  <h4>Incredible tooling</h4>
+  <p>
+    Build features quickly with simple, declarative templates. Extend the
+    template language with your own components and use a wide array of existing
+    components to build your UI. Get immediate Angular-specific help and
+    feedback with nearly every IDE (integrated development environment) and
+    editor. All this comes together so you can focus on building amazing apps
+    rather than trying to make the code work.
+  </p>
+  <h4>Loved by millions</h4>
+  <p>
+    From prototype through global deployment, Angular delivers the productivity
+    and scalable infrastructure that support Google's largest apps.
+  </p>
+
+  <p>
+    Learn more at <a href="https://angular.io" target="_blank">Angular.io!</a>
+  </p>
+  <h3>What you will create</h3>
+
+  <p>
+    In this codelab, you will start working on <b>MewTube</b>, a video social
+    network for cats only. (No dogs allowed!)
+  </p>
+</div>
+<codelab-exercise-preview
+  style="height: 50vh;width: 100%"
+  [exercise]="exercise"
+  [url]="'/assets/runner/'"
+>
+</codelab-exercise-preview>
+<div class="theme-basic">
+  <h3>Prerequisites:</h3>
+  <p>
+    Familiarity with the basics of
+    <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> is
+    highly recommended. Check out
+    <a
+      href="https://angular-presentation.firebaseapp.com/angular/typescript/intro"
+      target="_blank"
+      >the TypeScript codelab</a
+    >.
+  </p>
+  <h3>What you will learn</h3>
+  <p>
+    After completing this codelab, you’ll understand the basics of Angular and
+    will be able to create your first Angular app.
+  </p>
+
+  <p>
+    This codelab is broken down into four milestones. Each milestone takes about
+    30 minutes to complete.
+  </p>
+
+  <p>Start by clicking a milestone name:</p>
+  <ul>
+    <li>Create your first Angular app</li>
+    <li>Use Angular templates</li>
+    <li>Learn the basics of Angular Dependency Injection</li>
+    <li>Combine multiple Angular components together</li>
+  </ul>
+  <p>
+    or
+    <a href="https://codelab.fun/angular/create-first-app/intro" target="_blank"
+      >Launch the codelab</a
+    >
+  </p>
+</div>

apps/codelab/src/app/components/basics/basics.component.scss

@@ -0,0 +1,39 @@
+.theme-basic {
+  font-family: 'Helvetica Neue', sans-serif;
+  padding: 2vw;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  li:not(.action-item) {
+    margin: 0;
+    padding: 0;
+    font-weight: 300;
+  }
+
+  b {
+    color: #c04e22;
+    font-weight: 300;
+    background-color: #ffe;
+  }
+
+  h2,
+  li:not(.action-item) {
+    font-size: 3vw;
+    margin-bottom: 1vw;
+  }
+
+  li {
+    font-size: 18px !important;
+  }
+
+  h1 {
+    margin-bottom: 20px;
+  }
+  h3 {
+    margin: 10px 0;
+  }
+}

apps/codelab/src/app/components/basics/basics.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  ExerciseConfigTemplate,
+  Ng2TsExercises
+} from '../../../../../../ng2ts/ng2ts';
+
+@Component({
+  selector: 'codelab-basics',
+  templateUrl: './basics.component.html',
+  styleUrls: ['./basics.component.scss']
+})
+export class BasicsComponent implements OnInit {
+  exercise: ExerciseConfigTemplate;
+  constructor(private exercises: Ng2TsExercises) {
+    this.exercise = this.exercises.getExercises(6, 0);
+  }
+
+  ngOnInit(): void {}
+}

apps/codelab/src/app/components/codelab-components.module.ts

@@ -19,6 +19,7 @@ import { CodeDemoModule } from '@codelab/code-demos';
 import { CodelabPreviewComponent } from './slides-preview/codelab-preview.component';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { TestResultsModule } from '@codelab/utils/src/lib/test-results/test-results.module';
+import { BasicsComponent } from './basics/basics.component';
 
 @NgModule({
   imports: [
@@ -37,6 +38,7 @@ import { TestResultsModule } from '@codelab/utils/src/lib/test-results/test-resu
     TitleSlideComponent,
     BabelTestRunnerComponent,
     BreadcrumbComponent,
+    BasicsComponent,
     CodelabExerciseComponent,
     CodelabPreviewComponent,
     CodelabClosingSlideComponent,
@@ -50,6 +52,7 @@ import { TestResultsModule } from '@codelab/utils/src/lib/test-results/test-resu
     TitleSlideComponent,
     BabelTestRunnerComponent,
     BreadcrumbComponent,
+    BasicsComponent,
     CodelabExerciseComponent,
     CodelabPreviewComponent,
     CodelabClosingSlideComponent,