feat: star war demo

angular.json

@@ -10,7 +10,7 @@
       },
       "root": "apps/breadcrumb-demo",
       "sourceRoot": "apps/breadcrumb-demo/src",
-      "prefix": "app",
+      "prefix": "",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -131,7 +131,7 @@
       "projectType": "library",
       "root": "libs/xng-breadcrumb",
       "sourceRoot": "libs/xng-breadcrumb/src",
-      "prefix": "xng",
+      "prefix": "",
       "architect": {
         "build": {
           "builder": "@nrwl/angular:package",
@@ -176,7 +176,7 @@
       },
       "root": "apps/star-wars",
       "sourceRoot": "apps/star-wars/src",
-      "prefix": "xng",
+      "prefix": "",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

apps/breadcrumb-demo/src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="app-container mat-app-background" [ngClass]="{ 'xng-dark-theme': darkMode }">
-  <app-navbar (themeChanged)="updateTheme($event)"></app-navbar>
+  <bd-navbar (themeChanged)="updateTheme($event)"></bd-navbar>
   <section class="route-container" fxLayout="column" fxLayoutGap="16px">
     <div>
       <label for="default">Default breadcrumbs </label>

apps/breadcrumb-demo/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
+  selector: 'bd-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

apps/breadcrumb-demo/src/app/connect/connect-success/connect-success.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-connect-success',
+  selector: 'bd-connect-success',
   templateUrl: './connect-success.component.html',
   styleUrls: ['./connect-success.component.scss']
 })

apps/breadcrumb-demo/src/app/connect/connect/connect.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-connect',
+  selector: 'bd-connect',
   templateUrl: './connect.component.html',
   styleUrls: ['./connect.component.scss']
 })

apps/breadcrumb-demo/src/app/core/data.service.ts

@@ -3,7 +3,6 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Mentor } from '../shared/models/mentor';
 import { Mentee } from '../shared/models/mentee';
-import * as faker from 'faker';
 
 const options = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
 

apps/breadcrumb-demo/src/app/core/navbar/navbar.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Output } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 
 @Component({
-  selector: 'app-navbar',
+  selector: 'bd-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })

apps/breadcrumb-demo/src/app/core/page-not-found.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-page-not-found',
+  selector: 'bd-page-not-found',
   template: `
     <h2>404: Not found</h2>
     <p>Hey! It looks like the page doesn't exist yet.</p>

apps/breadcrumb-demo/src/app/dashboard/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 @Component({
-  selector: 'app-dashboard',
+  selector: 'bd-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })

apps/breadcrumb-demo/src/app/home/home.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-home',
+  selector: 'bd-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })

apps/breadcrumb-demo/src/app/mentee/mentee-add/mentee-add.component.ts

@@ -13,7 +13,7 @@ import { DataService } from '../../core/data.service';
 import { allLanguages } from '../../core/in-memory-data.service';
 
 @Component({
-  selector: 'app-mentee-add',
+  selector: 'bd-mentee-add',
   templateUrl: './mentee-add.component.html',
   styleUrls: ['./mentee-add.component.scss']
 })

apps/breadcrumb-demo/src/app/mentee/mentee-details/mentee-details.component.ts

@@ -5,7 +5,7 @@ import { BreadcrumbService } from '@xng/xng-breadcrumb';
 import { DataService } from '../../core/data.service';
 
 @Component({
-  selector: 'app-mentee-details',
+  selector: 'bd-mentee-details',
   templateUrl: './mentee-details.component.html',
   styleUrls: ['./mentee-details.component.scss']
 })

apps/breadcrumb-demo/src/app/mentee/mentee-edit/mentee-edit.component.ts

@@ -13,7 +13,7 @@ import { allLanguages } from '../../core/in-memory-data.service';
 import { Mentee } from '../../shared/models/mentee';
 
 @Component({
-  selector: 'app-mentee-edit',
+  selector: 'bd-mentee-edit',
   templateUrl: './mentee-edit.component.html',
   styleUrls: ['./mentee-edit.component.scss']
 })

apps/breadcrumb-demo/src/app/mentee/mentee-list/mentee-list.component.ts

@@ -4,7 +4,7 @@ import { DataService } from '../../core/data.service';
 import { Mentor } from '../../shared/models/mentor';
 
 @Component({
-  selector: 'app-mentee-list',
+  selector: 'bd-mentee-list',
   templateUrl: './mentee-list.component.html',
   styleUrls: ['./mentee-list.component.scss']
 })

apps/breadcrumb-demo/src/app/mentee/mentee/mentee.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-mentee',
+  selector: 'bd-mentee',
   templateUrl: './mentee.component.html',
   styleUrls: ['./mentee.component.scss']
 })

apps/breadcrumb-demo/src/app/mentor/mentor-add/mentor-add.component.ts

@@ -14,7 +14,7 @@ import { DataService } from '../../core/data.service';
 import { BreadcrumbService } from '@xng/xng-breadcrumb';
 
 @Component({
-  selector: 'app-mentor-add',
+  selector: 'bd-mentor-add',
   templateUrl: './mentor-add.component.html',
   styleUrls: ['./mentor-add.component.scss']
 })

apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts

@@ -5,7 +5,7 @@ import { BreadcrumbService } from '@xng/xng-breadcrumb';
 import { DataService } from '../../core/data.service';
 
 @Component({
-  selector: 'app-mentor-details',
+  selector: 'bd-mentor-details',
   templateUrl: './mentor-details.component.html',
   styleUrls: ['./mentor-details.component.scss']
 })

apps/breadcrumb-demo/src/app/mentor/mentor-edit/mentor-edit.component.ts

@@ -13,7 +13,7 @@ import { Mentor } from '../../shared/models/mentor';
 import { BreadcrumbService } from '@xng/xng-breadcrumb';
 
 @Component({
-  selector: 'app-mentor-edit',
+  selector: 'bd-mentor-edit',
   templateUrl: './mentor-edit.component.html',
   styleUrls: ['./mentor-edit.component.scss']
 })

apps/breadcrumb-demo/src/app/mentor/mentor-list/mentor-list.component.ts

@@ -5,7 +5,7 @@ import { Mentor } from '../../shared/models/mentor';
 import { BreadcrumbService } from '@xng/xng-breadcrumb';
 
 @Component({
-  selector: 'app-mentor-list',
+  selector: 'bd-mentor-list',
   templateUrl: './mentor-list.component.html',
   styleUrls: ['./mentor-list.component.scss']
 })

apps/breadcrumb-demo/src/app/mentor/mentor/mentor.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-mentor',
+  selector: 'bd-mentor',
   templateUrl: './mentor.component.html',
   styleUrls: ['./mentor.component.scss']
 })

apps/breadcrumb-demo/src/index.html

@@ -38,6 +38,6 @@
   </head>
 
   <body>
-    <app-root></app-root>
+    <bd-root></bd-root>
   </body>
 </html>

apps/breadcrumb-demo/tslint.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../tslint.json",
   "rules": {
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"]
+    "directive-selector": [true, "attribute", "bd", "camelCase"],
+    "component-selector": [true, "element", "bd", "kebab-case"]
   },
   "linterOptions": {
     "exclude": ["!**/*"]

apps/star-wars/src/app/app.component.html

@@ -1,120 +1,35 @@
 <header class="flex">
-  <img
-    alt="Nx logo"
-    width="75"
-    src="https://nx.dev/assets/images/nx-logo-white.svg"
-  />
   <h1>Welcome to {{ title }}!</h1>
 </header>
 <main>
-  <h2>Resources &amp; Tools</h2>
-  <p>
-    Thank you for using and showing some ♥ for Nx.
-  </p>
-  <div class="flex github-star-container">
-    <a
-      href="https://github.com/nrwl/nx"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      If you like Nx, please give it a star:
-      <div class="github-star-badge">
-        <svg
-          class="material-icons"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-          />
-        </svg>
-        Star
-      </div>
-    </a>
-  </div>
-  <p>
-    Here are some links to help you get started.
-  </p>
   <ul class="resources">
     <li class="col-span-2">
       <a
         class="resource flex"
-        href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
+        [routerLink]="['/']"
       >
-        Nx video course
+        Home
       </a>
     </li>
     <li class="col-span-2">
       <a
         class="resource flex"
-        href="https://nx.dev/angular/getting-started/what-is-nx"
+        [routerLink]="['film-list']"
       >
-        Nx video tutorial
+        Films
       </a>
     </li>
     <li class="col-span-2">
       <a
         class="resource flex"
-        href="https://nx.dev/angular/tutorial/01-create-application"
+        [routerLink]="['character-list']"
       >
-        Interactive tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a class="resource flex" href="https://nx.app/">
-        <svg
-          width="36"
-          height="36"
-          viewBox="0 0 120 120"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
-            fill="#0E2039"
-          />
-          <path
-            d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
-            fill="white"
-          />
-        </svg>
-        <span class="gutter-left">Nx Cloud</span>
+        Characters
       </a>
     </li>
   </ul>
-  <h2>Next Steps</h2>
-  <p>Here are some things you can do with Nx.</p>
-  <details open>
-    <summary>Add UI library</summary>
-    <pre>
-# Generate UI lib
-ng g @nrwl/angular:lib ui
-
-# Add a component
-ng g @nrwl/angular:component xyz --project ui</pre
-    >
-  </details>
-  <details>
-    <summary>View dependency graph</summary>
-    <pre>nx dep-graph</pre>
-  </details>
-  <details>
-    <summary>Run affected commands</summary>
-    <pre>
-# see what's been affected by changes
-ng affected:dep-graph
-
-# run tests for current changes
-ng affected:test
-
-# run e2e tests for current changes
-ng affected:e2e
-</pre
-    >
-  </details>
 </main>
 
+<h1>Description</h1>
+
 <router-outlet></router-outlet>

apps/star-wars/src/app/app.component.scss

@@ -9,10 +9,6 @@
   margin: 50px auto;
 }
 
-.gutter-left {
-  margin-left: 9px;
-}
-
 .col-span-2 {
   grid-column: span 2;
 }

apps/star-wars/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'xng-root',
+  selector: 'sw-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'star-wars';
+  title = 'Star Wars';
 }