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

closes #2076

Author: trimox

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.module.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-demo/routing.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/menu-demo/api.html renamed to demos/src/app/components/menu/api.html

@@ -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/menu-demo/examples.html renamed to demos/src/app/components/menu/examples.html

@@ -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';`
     };
   }
 }