Skip to content

Commit b82af50

Browse files
jeroenouwjeroenouw
committed
Updated dependencies and added mat expansion
1 parent d3b5dc8 commit b82af50

12 files changed

+526
-373
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
![logo](https://jerouw.nl/wp-content/uploads/2017/05/ngfbmd.png "Logo")
1010

1111
# Angular 4 | Material Design | Firebase - Starter kit
12-
A full stack starter app containing [Angular 4](https://angular.io) (v4.4.5), [Material](https://material.io/) (v2.0.0-beta.12) and [Firebase](https://firebase.google.com/) (v4.5.1).
12+
A full stack starter app containing [Angular 4](https://angular.io) (v4.4.6), [Material](https://material.io/) (v2.0.0-beta.12) and [Firebase](https://firebase.google.com/) (v4.6.0).
1313

1414
## [Live demo](http://angular4.jerouw.nl)
1515
![loginpage](https://jerouw.nl/wp-content/uploads/2017/05/ngfbmdprintscreen.png "Logo")

‎docs/FEATURES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
* Mat Toolbar
3333
* Mat Table
3434
* Mat Stepper
35+
* Mat Expansion panel
3536
* Mat Card
3637
* Mat Tabs
3738
* Mat Buttons

‎package-lock.json‎

Lines changed: 384 additions & 349 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,30 +29,30 @@
2929
"i18n": "ng-xi18n"
3030
},
3131
"dependencies": {
32-
"@angular/animations": "^4.4.5",
32+
"@angular/animations": "^4.4.6",
3333
"@angular/cdk": "^2.0.0-beta.12",
34-
"@angular/common": "^4.4.5",
35-
"@angular/compiler": "^4.4.5",
36-
"@angular/core": "^4.4.5",
37-
"@angular/forms": "^4.4.5",
38-
"@angular/http": "^4.4.5",
34+
"@angular/common": "^4.4.6",
35+
"@angular/compiler": "^4.4.6",
36+
"@angular/core": "^4.4.6",
37+
"@angular/forms": "^4.4.6",
38+
"@angular/http": "^4.4.6",
3939
"@angular/material": "^2.0.0-beta.12",
40-
"@angular/platform-browser": "^4.4.5",
41-
"@angular/platform-browser-dynamic": "^4.4.5",
42-
"@angular/platform-server": "^4.4.5",
43-
"@angular/router": "^4.4.5",
40+
"@angular/platform-browser": "^4.4.6",
41+
"@angular/platform-browser-dynamic": "^4.4.6",
42+
"@angular/platform-server": "^4.4.6",
43+
"@angular/router": "^4.4.6",
4444
"core-js": "^2.5.1",
45-
"firebase": "^4.5.1",
45+
"firebase": "^4.6.0",
4646
"hammerjs": "^2.0.8",
47-
"rxjs": "^5.4.3",
47+
"rxjs": "^5.5.0",
4848
"ts-helpers": "*",
4949
"zone.js": "^0.8.18"
5050
},
5151
"devDependencies": {
52-
"@angular/cli": "^1.4.7",
53-
"@angular/compiler-cli": "^4.4.5",
52+
"@angular/cli": "^1.4.9",
53+
"@angular/compiler-cli": "^4.4.6",
5454
"@types/jasmine": "^2.6.0",
55-
"@types/node": "^8.0.34",
55+
"@types/node": "^8.0.46",
5656
"codelyzer": "^3.2.1",
5757
"jasmine-core": "^2.7.0",
5858
"jasmine-spec-reporter": "^4.2.0",
@@ -62,10 +62,10 @@
6262
"karma-coverage-istanbul-reporter": "^1.3.0",
6363
"karma-jasmine": "^1.1.0",
6464
"karma-jasmine-html-reporter": "^0.2.2",
65-
"protractor": "^5.1.2",
65+
"protractor": "^5.2.0",
6666
"ts-node": "^3.3.0",
67-
"tslint": "^5.7.0",
67+
"tslint": "^5.8.0",
6868
"typescript": "^2.5.3",
69-
"webpack": "^3.7.1"
69+
"webpack": "^3.8.1"
7070
}
7171
}

‎src/app/app.module.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/aniMations';
55
import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatInputModule, MatSnackBarModule,
66
MatToolbarModule, MatDialogModule, MatSidenavModule, MatNativeDateModule,
77
MatCardModule, MatTabsModule, MatIconModule } from '@angular/Material';
8-
import 'hammerjs';
98
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
109
import { HttpClientModule } from '@angular/common/http';
1110

‎src/app/components/misc/expansion-panel/expansion-panel.component.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<h3>mat expansion panel (accordion) : </h3>
2+
<mat-accordion class="headers-align">
3+
<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
4+
<mat-expansion-panel-header>
5+
<mat-panel-title>
6+
Personal data
7+
</mat-panel-title>
8+
<mat-panel-description>
9+
Type your name and age
10+
<mat-icon>account_circle</mat-icon>
11+
</mat-panel-description>
12+
</mat-expansion-panel-header>
13+
14+
<mat-form-field>
15+
<input matInput placeholder="First name">
16+
</mat-form-field>
17+
18+
<mat-form-field>
19+
<input matInput type="number" min="1" placeholder="Age">
20+
</mat-form-field>
21+
22+
<mat-action-row>
23+
<button mat-button color="primary" (click)="nextStep()">Next</button>
24+
</mat-action-row>
25+
</mat-expansion-panel>
26+
27+
<mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
28+
<mat-expansion-panel-header>
29+
<mat-panel-title>
30+
Destination
31+
</mat-panel-title>
32+
<mat-panel-description>
33+
Type the country name
34+
<mat-icon>map</mat-icon>
35+
</mat-panel-description>
36+
</mat-expansion-panel-header>
37+
38+
<mat-form-field>
39+
<input matInput placeholder="Country">
40+
</mat-form-field>
41+
42+
<mat-action-row>
43+
<button mat-button color="warn" (click)="prevStep()">Previous</button>
44+
<button mat-button color="primary" (click)="nextStep()">Next</button>
45+
</mat-action-row>
46+
</mat-expansion-panel>
47+
48+
<mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
49+
<mat-expansion-panel-header>
50+
<mat-panel-title>
51+
Day of the trip
52+
</mat-panel-title>
53+
<mat-panel-description>
54+
Inform the date you wish to travel
55+
<mat-icon>date_range</mat-icon>
56+
</mat-panel-description>
57+
</mat-expansion-panel-header>
58+
59+
<mat-form-field>
60+
<input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
61+
</mat-form-field>
62+
<mat-datepicker #picker></mat-datepicker>
63+
64+
<mat-action-row>
65+
<button mat-button color="warn" (click)="prevStep()">Previous</button>
66+
<button mat-button color="primary" (click)="nextStep()">End</button>
67+
</mat-action-row>
68+
</mat-expansion-panel>
69+
70+
</mat-accordion>

‎src/app/components/misc/expansion-panel/expansion-panel.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.headers-align .mat-expansion-panel-header-title,
2+
.headers-align .mat-expansion-panel-header-description {
3+
flex-basis: 0;
4+
}
5+
6+
.headers-align .mat-expansion-panel-header-description {
7+
justify-content: space-between;
8+
align-items: center;
9+
}

‎src/app/components/misc/expansion-panel/expansion-panel.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-expansion-panel',
5+
templateUrl: './expansion-panel.component.html',
6+
styleUrls: ['./expansion-panel.component.scss']
7+
})
8+
export class ExpansionPanelComponent implements OnInit {
9+
step = 0;
10+
11+
constructor() { }
12+
13+
ngOnInit() {
14+
}
15+
16+
setStep(index: number) {
17+
this.step = index;
18+
}
19+
20+
nextStep() {
21+
this.step++;
22+
}
23+
24+
prevStep() {
25+
this.step--;
26+
}
27+
28+
}

‎src/app/components/misc/misc.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ <h3>mat Slide toggle : </h3>
6262

6363
<hr>
6464

65+
<app-expansion-panel></app-expansion-panel>
66+
67+
<hr>
68+
6569
<!-- Pipes -->
6670
<app-change-detection></app-change-detection>
6771

‎src/app/components/misc/misc.module.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common';
33

44
import { MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule,
55
MatSlideToggleModule, MatStepperModule, MatTooltipModule, MatSidenavModule,
6-
MatTableModule, MatCardModule, MatDatepickerModule } from '@angular/material';
6+
MatTableModule, MatCardModule, MatDatepickerModule, MatExpansionModule,
7+
MatIconModule } from '@angular/material';
78

89
// import { CdkTableModule } from '@angular/cdk';
910
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -18,6 +19,7 @@ import { ChangeDetailComponent } from './change/change-detail.component';
1819
import { VirtRealComponent } from './virtual-reality/virtreal.component';
1920
import { TableComponent } from './table/table.component';
2021
import { StepperComponent } from './stepper/stepper.component';
22+
import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.component';
2123

2224
@NgModule({
2325
declarations: [
@@ -27,13 +29,15 @@ import { StepperComponent } from './stepper/stepper.component';
2729
ChangeDetailComponent,
2830
VirtRealComponent,
2931
TableComponent,
30-
StepperComponent
32+
StepperComponent,
33+
ExpansionPanelComponent
3134
],
3235
imports: [
3336
CommonModule,
3437
MatButtonModule, MatCheckboxModule, MatInputModule, MatNativeDateModule,
3538
MatSlideToggleModule, MatStepperModule, MatTooltipModule, MatSidenavModule,
36-
MatTableModule, MatCardModule, MatDatepickerModule,
39+
MatTableModule, MatCardModule, MatDatepickerModule, MatExpansionModule,
40+
MatIconModule,
3741
FormsModule, ReactiveFormsModule,
3842
PipesModule,
3943
// MiscRoutingModule
@@ -45,7 +49,8 @@ import { StepperComponent } from './stepper/stepper.component';
4549
ChangeDetailComponent,
4650
VirtRealComponent,
4751
TableComponent,
48-
StepperComponent
52+
StepperComponent,
53+
ExpansionPanelComponent
4954
]
5055
})
5156

0 commit comments

Comments
 (0)