Add angular material

gregmagolan · gregmagolan · commit b88e14026166 · 2018-10-29T23:00:54.000-07:00
diff --git a/WORKSPACE b/WORKSPACE
@@ -35,6 +35,13 @@ http_archive(
     sha256 = "72b0b4e517f43358f554c125e40e39f67688cd2738a8998b4a266981ed32f403",
 )
 
+# Angular material
+http_archive(
+    name = "angular_material",
+    url = "https://github.com/gregmagolan/material2/archive/129694bb7305218ff8dc62827a14059fab4ff0ba.zip",
+    strip_prefix = "material2-129694bb7305218ff8dc62827a14059fab4ff0ba",
+)
+
 # Rules for compiling sass
 http_archive(
     name = "io_bazel_rules_sass",
@@ -97,3 +104,7 @@ sass_repositories()
 load("@angular//:index.bzl", "ng_setup_workspace")
 
 ng_setup_workspace()
+
+load("@angular_material//:index.bzl", "mat_setup_workspace")
+
+mat_setup_workspace()
diff --git a/src/BUILD.bazel b/src/BUILD.bazel
@@ -41,6 +41,7 @@ ts_devserver(
     entry_module = "angular_bazel_example/src/main.dev",
     scripts = [
         ":require.config.js",
+        ":module-id.js",
     ],
     # This is the URL we'll point our <script> tag at
     serving_path = "/bundle.min.js",
diff --git a/src/hello-world/BUILD.bazel b/src/hello-world/BUILD.bazel
@@ -25,6 +25,7 @@ ng_module(
         "@angular//packages/core",
         "@angular//packages/forms",
         "@angular//packages/router",
+        "@angular_material//src/lib:material",
         "@npm//@types",
     ],
 )
@@ -51,6 +52,7 @@ ts_web_test_suite(
     bootstrap = [
         "@npm//node_modules/zone.js:dist/zone-testing-bundle.js",
         "@npm//node_modules/reflect-metadata:Reflect.js",
+        "//src:module-id.js",
     ],
     browsers = [
         "@io_bazel_rules_webtesting//browsers:chromium-local",
diff --git a/src/hello-world/hello-world.component.html b/src/hello-world/hello-world.component.html
@@ -3,3 +3,5 @@ <h1>Home</h1>
 <div>Hello {{ name }}</div>
 
 <input type="text" [(ngModel)]="name"/>
+
+<div><mat-icon>mood</mat-icon></div>
diff --git a/src/hello-world/hello-world.module.ts b/src/hello-world/hello-world.module.ts
@@ -1,13 +1,15 @@
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MatIconModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 
 import {HelloWorldComponent} from './hello-world.component';
 
 @NgModule({
   declarations: [HelloWorldComponent],
   imports: [
-    FormsModule, RouterModule, RouterModule.forChild([{path: '', component: HelloWorldComponent}])
+    MatIconModule, FormsModule, RouterModule,
+    RouterModule.forChild([{path: '', component: HelloWorldComponent}])
   ],
   exports: [HelloWorldComponent],
 })
diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,7 @@
   <head>
     <title>Angular Bazel Example</title>
     <base href="/">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   <body>
     <!-- The Angular application will be bootstrapped into this element. -->
diff --git a/src/module-id.js b/src/module-id.js
@@ -0,0 +1 @@
+var module = {id: ''};
