docs: Add missing @use imports to guides (#2079)

closes #2076

demos/src/app/app-routing.module.ts

@@ -55,7 +55,7 @@ const routes: Routes = [
       import('./components/linear-progress/module').then(m => m.LinearProgressModule)
   },
   {path: 'list-demo', loadChildren: () => import('./components/list-demo/list.module').then(m => m.ListModule)},
-  {path: 'menu-demo', loadChildren: () => import('./components/menu-demo/menu.module').then(m => m.MenuModule)},
+  {path: 'menu-demo', loadChildren: () => import('./components/menu/module').then(m => m.MenuModule)},
   {
     path: 'menu-surface-demo', loadChildren: () =>
       import('./components/menu-surface/module').then(m => m.MenuSurfaceModule)
@@ -73,11 +73,11 @@ const routes: Routes = [
   {path: 'tabs-demo', loadChildren: () => import('./components/tabs-demo/tabs.module').then(m => m.TabsModule)},
   {
     path: 'text-field-demo', loadChildren: () =>
-      import('./components/text-field-demo/text-field.module').then(m => m.TextFieldModule)
+      import('./components/text-field/module').then(m => m.TextFieldModule)
   },
   {
     path: 'top-app-bar-demo', loadChildren: () =>
-      import('./components/top-app-bar-demo/top-app-bar.module').then(m => m.TopAppBarModule)
+      import('./components/top-app-bar/module').then(m => m.TopAppBarModule)
   },
   {
     path: 'typography-demo', loadChildren: () =>

demos/src/app/components/menu-demo/menu-demo.ts → demos/src/app/components/menu/menu.ts

@@ -4,7 +4,7 @@ import {MdcListItem} from '@angular-mdc/web';
 import {ComponentViewer} from '../../shared/component-viewer';
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class MenuDemo implements OnInit {
+export class Menu implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -20,7 +20,9 @@ export class MenuDemo implements OnInit {
       }],
       code: `import {MdcMenuModule} from '@angular-mdc/web';`,
       sass: `@use '@material/menu/mdc-menu';
-@use '@material/menu';`
+@use '@material/menu';
+@use '@material/list/mdc-list';
+@use '@material/menu-surface/mdc-menu-surface';`
     };
   }
 }

demos/src/app/components/menu/module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+
+import {SharedModule} from '../../shared.module';
+import {RoutingModule, ROUTE_DECLARATIONS} from './routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RoutingModule
+  ],
+  declarations: [ROUTE_DECLARATIONS]
+})
+export class MenuModule {}

demos/src/app/components/text-field-demo/routing.module.ts → demos/src/app/components/menu/routing.module.ts

@@ -1,18 +1,18 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 
-import {Api, Examples, Sass, TextFieldDemo} from './text-field-demo';
+import {Api, Examples, Sass, Menu} from './menu';
 
 export const ROUTE_DECLARATIONS = [
   Api,
   Examples,
   Sass,
-  TextFieldDemo
+  Menu
 ];
 
 const ROUTES: Routes = [
   {
-    path: '', component: TextFieldDemo,
+    path: '', component: Menu,
     children: [
       {path: '', redirectTo: 'api'},
       {path: 'api', component: Api},

demos/src/app/components/radio/radio.ts

@@ -22,7 +22,8 @@ export class Radio implements OnInit {
       }],
       code: `import {MdcRadioModule} from '@angular-mdc/web';`,
       sass: `@use '@material/radio/mdc-radio';
-@use '@material/radio';`
+@use '@material/radio';
+@use '@material/form-field/mdc-form-field';`
     };
   }
 }

demos/src/app/components/select/select.ts

@@ -26,7 +26,10 @@ export class Select implements OnInit {
       }],
       code: `import {MdcSelectModule} from '@angular-mdc/web';`,
       sass: `@use '@material/select/mdc-select';
-@use '@material/select';`
+@use '@material/select';
+@use '@material/list/mdc-list';
+@use '@material/menu-surface/mdc-menu-surface';
+@use '@material/menu/mdc-menu';`
     };
   }
 }

demos/src/app/components/text-field/routing.module.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, TextField} from './text-field';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  TextField
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: TextField,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}

demos/src/app/components/text-field-demo/text-field-demo.ts → demos/src/app/components/text-field/text-field.ts

@@ -15,7 +15,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
 }
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class TextFieldDemo implements OnInit {
+export class TextField implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -31,7 +31,8 @@ export class TextFieldDemo implements OnInit {
       }],
       code: `import {MdcTextFieldModule} from '@angular-mdc/web';`,
       sass: `@use '@material/textfield/mdc-text-field';
-@use '@material/textfield';`
+@use '@material/textfield';
+@use '@material/form-field/mdc-form-field';`
     };
   }
 }

demos/src/app/components/top-app-bar/routing.module.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, TopAppBar} from './top-app-bar';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  TopAppBar
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: TopAppBar,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}

demos/src/app/components/top-app-bar-demo/top-app-bar-demo.ts → demos/src/app/components/top-app-bar/top-app-bar.ts

@@ -3,7 +3,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {ComponentViewer} from '../../shared/component-viewer';
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class TopAppBarDemo implements OnInit {
+export class TopAppBar implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -19,7 +19,8 @@ export class TopAppBarDemo implements OnInit {
       }],
       code: `import {MdcTopAppBarModule} from '@angular-mdc/web';`,
       sass: `@use '@material/top-app-bar/mdc-top-app-bar';
-@use '@material/top-app-bar';`
+@use '@material/top-app-bar';
+@use '@material/icon-button/mdc-icon-button';`
     };
   }
 }