Skip to content

Commit f5a8c25

Browse files
suprishisuprishi
committed
Angular Material tutorial with devon4ng
1 parent f69b789 commit f5a8c25

18 files changed

Lines changed: 382 additions & 0 deletions

‎devon4ng-mat-layout/files/app-routing.module.txt‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
import { HomeComponent } from './pages/home/home.component';
4+
import { DataComponent } from './pages/data/data.component';
5+
6+
const routes: Routes = [
7+
{ path: '', component: HomeComponent },
8+
{ path: 'data', component: DataComponent }
9+
];
10+
11+
@NgModule({
12+
imports: [RouterModule.forRoot(routes)],
13+
exports: [RouterModule]
14+
})
15+
export class AppRoutingModule { }

‎devon4ng-mat-layout/files/app.component-navlinks.scss.txt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.menu {
2+
margin-right: auto;
3+
}
4+
mat-sidenav-container {
5+
position: absolute;
6+
top: 64px;
7+
left: 0;
8+
right: 0;
9+
bottom: 0;
10+
a.active {
11+
background: #8e8d8d;
12+
color: #fff;
13+
14+
p {
15+
color: #4a4a4a;
16+
}
17+
}
18+
}

‎devon4ng-mat-layout/files/app.component-navlinks.txt‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<mat-toolbar color="primary">
2+
<button mat-icon-button aria-label="menu" class="menu" (click)="sidenav.toggle()">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
6+
<button mat-button>Menu 2</button>
7+
<button mat-button>Menu 3</button>
8+
9+
<mat-menu #submenu="matMenu">
10+
<button mat-menu-item>Sub-menu 1</button>
11+
<button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
12+
</mat-menu>
13+
14+
<mat-menu #submenu2="matMenu">
15+
<button mat-menu-item>Menu Item 1</button>
16+
<button mat-menu-item>Menu Item 2</button>
17+
<button mat-menu-item>Menu Item 3</button>
18+
</mat-menu>
19+
20+
</mat-toolbar>
21+
<mat-sidenav-container>
22+
<mat-sidenav [disableClose]="false" mode="over" #sidenav>
23+
<mat-nav-list>
24+
<a
25+
id="home"
26+
mat-list-item
27+
[routerLink]="['./']"
28+
(click)="sidenav.close()"
29+
routerLinkActive="active"
30+
[routerLinkActiveOptions]="{exact: true}"
31+
>
32+
<mat-icon matListAvatar>home</mat-icon>
33+
<h3 matLine>Home</h3>
34+
<p matLine>sample home page</p>
35+
</a>
36+
<a
37+
id="sampleData"
38+
mat-list-item
39+
[routerLink]="['./data']"
40+
(click)="sidenav.close()"
41+
routerLinkActive="active"
42+
>
43+
<mat-icon matListAvatar>grid_on</mat-icon>
44+
<h3 matLine>Data</h3>
45+
<p matLine>sample data page</p>
46+
</a>
47+
</mat-nav-list>
48+
</mat-sidenav>
49+
<mat-sidenav-content>
50+
<router-outlet></router-outlet>
51+
</mat-sidenav-content>
52+
</mat-sidenav-container>

‎devon4ng-mat-layout/files/app.component-routing.txt‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<mat-toolbar color="primary">
2+
<button mat-icon-button aria-label="menu" class="menu">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
6+
<button mat-button>Menu 2</button>
7+
<button mat-button>Menu 3</button>
8+
9+
<mat-menu #submenu="matMenu">
10+
<button mat-menu-item>Sub-menu 1</button>
11+
<button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
12+
</mat-menu>
13+
14+
<mat-menu #submenu2="matMenu">
15+
<button mat-menu-item>Menu Item 1</button>
16+
<button mat-menu-item>Menu Item 2</button>
17+
<button mat-menu-item>Menu Item 3</button>
18+
</mat-menu>
19+
20+
</mat-toolbar>
21+
<router-outlet></router-outlet>

‎devon4ng-mat-layout/files/app.component-sidenav.scss.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.menu {
2+
margin-right: auto;
3+
}
4+
mat-sidenav-container {
5+
position: absolute;
6+
top: 64px;
7+
left: 0;
8+
right: 0;
9+
bottom: 0;
10+
}

‎devon4ng-mat-layout/files/app.component-sidenav.txt‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<mat-toolbar color="primary">
2+
<button mat-icon-button aria-label="menu" class="menu" (click)="sidenav.toggle()">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
6+
<button mat-button>Menu 2</button>
7+
<button mat-button>Menu 3</button>
8+
9+
<mat-menu #submenu="matMenu">
10+
<button mat-menu-item>Sub-menu 1</button>
11+
<button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
12+
</mat-menu>
13+
14+
<mat-menu #submenu2="matMenu">
15+
<button mat-menu-item>Menu Item 1</button>
16+
<button mat-menu-item>Menu Item 2</button>
17+
<button mat-menu-item>Menu Item 3</button>
18+
</mat-menu>
19+
20+
</mat-toolbar>
21+
<mat-sidenav-container>
22+
<mat-sidenav mode="over" [disableClose]="false" #sidenav>
23+
Sidenav
24+
</mat-sidenav>
25+
<mat-sidenav-content>
26+
<router-outlet></router-outlet>
27+
</mat-sidenav-content>
28+
</mat-sidenav-container>

‎devon4ng-mat-layout/files/app.component.scss.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.menu {
2+
margin-right: auto;
3+
}

‎devon4ng-mat-layout/files/app.component.txt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<mat-toolbar color="primary">
2+
<button mat-icon-button aria-label="menu" class="menu">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<button mat-button [matMenuTriggerFor]="submenu">Menu 1</button>
6+
<button mat-button>Menu 2</button>
7+
<button mat-button>Menu 3</button>
8+
9+
<mat-menu #submenu="matMenu">
10+
<button mat-menu-item>Sub-menu 1</button>
11+
<button mat-menu-item [matMenuTriggerFor]="submenu2">Sub-menu 2</button>
12+
</mat-menu>
13+
14+
<mat-menu #submenu2="matMenu">
15+
<button mat-menu-item>Menu Item 1</button>
16+
<button mat-menu-item>Menu Item 2</button>
17+
<button mat-menu-item>Menu Item 3</button>
18+
</mat-menu>
19+
20+
</mat-toolbar>

‎devon4ng-mat-layout/files/app.module-components.txt‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2+
import { MatIconModule } from '@angular/material/icon';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { MatMenuModule } from '@angular/material/menu';
5+
import { MatListModule } from '@angular/material/list';
6+
import { MatToolbarModule } from '@angular/material/toolbar';
7+
import { MatSidenavModule } from '@angular/material/sidenav';
8+
import { NgModule } from '@angular/core';
9+
10+
import { AppRoutingModule } from './app-routing.module';
11+
import { AppComponent } from './app.component';
12+
import { HomeComponent } from './pages/home/home.component';
13+
import { DataComponent } from './pages/data/data.component';
14+
15+
@NgModule({
16+
declarations: [
17+
AppComponent,
18+
HomeComponent,
19+
DataComponent
20+
],
21+
imports: [
22+
BrowserAnimationsModule,
23+
MatIconModule,
24+
MatButtonModule,
25+
MatMenuModule,
26+
MatListModule,
27+
MatToolbarModule,
28+
MatSidenavModule,
29+
AppRoutingModule
30+
],
31+
providers: [],
32+
bootstrap: [AppComponent]
33+
})
34+
export class AppModule { }

‎devon4ng-mat-layout/files/app.module.txt‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2+
import { MatIconModule } from '@angular/material/icon';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { MatMenuModule } from '@angular/material/menu';
5+
import { MatListModule } from '@angular/material/list';
6+
import { MatToolbarModule } from '@angular/material/toolbar';
7+
import { MatSidenavModule } from '@angular/material/sidenav';
8+
import { NgModule } from '@angular/core';
9+
10+
import { AppRoutingModule } from './app-routing.module';
11+
import { AppComponent } from './app.component';
12+
13+
@NgModule({
14+
declarations: [
15+
AppComponent
16+
],
17+
imports: [
18+
BrowserAnimationsModule,
19+
MatIconModule,
20+
MatButtonModule,
21+
MatMenuModule,
22+
MatListModule,
23+
MatToolbarModule,
24+
MatSidenavModule,
25+
AppRoutingModule
26+
],
27+
providers: [],
28+
bootstrap: [AppComponent]
29+
})
30+
export class AppModule { }

0 commit comments

Comments
 (0)