Skip to content

Commit 7df9e2e

Browse files
AnthonyNahasAnthonyNahas
committed
fix(demo): migrate ngx-material-pages to @angular-material-extensions/pages 
1 parent efec90c commit 7df9e2e

File tree

5 files changed

+66
-66
lines changed

5 files changed

+66
-66
lines changed

‎demo/package-lock.json‎

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

‎demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
},
2828
"private": true,
2929
"dependencies": {
30+
"@angular-material-extensions/pages": "^2.1.0",
3031
"@angular/animations": "^7.2.10",
3132
"@angular/cdk": "^7.3.4",
3233
"@angular/common": "^7.2.10",
@@ -54,7 +55,6 @@
5455
"material-design-icons": "^3.0.1",
5556
"ngx-clipboard": "^11.1.9",
5657
"ngx-highlightjs": "^3.0.3",
57-
"ngx-material-pages": "^1.3.2",
5858
"rxjs": "^6.4.0",
5959
"tslib": "^1.9.3",
6060
"zone.js": "^0.8.29"

‎demo/src/app/app.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {AppComponent} from './app.component';
99
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
1010
import {environment} from '../environments/environment';
1111
import {ServiceWorkerModule} from '@angular/service-worker';
12-
import {NgxMaterialPagesModule} from 'ngx-material-pages';
1312
import {HttpClientModule} from '@angular/common/http';
1413
import {ClipboardModule} from 'ngx-clipboard';
1514
import {Angulartics2Module} from 'angulartics2';
@@ -21,6 +20,7 @@ import {firebaseKey} from './firebase.config';
2120
import typescript from 'highlight.js/lib/languages/typescript';
2221
import scss from 'highlight.js/lib/languages/scss';
2322
import xml from 'highlight.js/lib/languages/xml';
23+
import {MatPagesModule} from '@angular-material-extensions/pages';
2424

2525
export function hljsLanguages() {
2626
return [
@@ -55,7 +55,7 @@ export function firebaseAppNameFactory() {
5555
HighlightModule.forRoot({
5656
languages: hljsLanguages
5757
}),
58-
NgxMaterialPagesModule.forRoot(),
58+
MatPagesModule.forRoot(),
5959
ClipboardModule,
6060
BrowserAnimationsModule,
6161
FormsModule,

‎demo/src/app/getting-started/getting-started.component.html‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ <h1>Getting Started</h1>
77
<section class="getting-started">
88
<div class="container">
99

10-
<ngx-material-pages title="ngx-auth-firebaseui">
10+
<mat-pages title="ngx-auth-firebaseui">
1111
<!--1-->
12-
<ngx-material-page-loader>
13-
<ngx-material-page-outlook title="Setup Development Environment">
14-
</ngx-material-page-outlook>
15-
<ngx-material-page-content>
12+
<mat-page-loader>
13+
<mat-page-outlook title="Setup Development Environment">
14+
</mat-page-outlook>
15+
<mat-page-content>
1616
<mat-card-title>Please make sure that you have <a href="https://nodejs.org/en/" mat-button
1717
color="primary">NodeJS</a>
1818
and <a href="https://www.npmjs.com/package/npm"
@@ -86,15 +86,15 @@ <h1>Getting Started</h1>
8686
</div>
8787
</mat-card-content>
8888
</mat-card>
89-
</ngx-material-page-content>
90-
</ngx-material-page-loader>
89+
</mat-page-content>
90+
</mat-page-loader>
9191

9292

9393
<!--2-->
94-
<ngx-material-page-loader>
95-
<ngx-material-page-outlook title="Setup Angular App">
96-
</ngx-material-page-outlook>
97-
<ngx-material-page-content>
94+
<mat-page-loader>
95+
<mat-page-outlook title="Setup Angular App">
96+
</mat-page-outlook>
97+
<mat-page-content>
9898
<mat-card-title> Time to begin with Angular</mat-card-title>
9999
<p>If you have already a setup angular project, you can skip this step, otherwise you can generate a project
100100
via the angular cli by running the following</p>
@@ -137,15 +137,15 @@ <h1>Getting Started</h1>
137137
type="video/mp4">
138138
</video>
139139
</div>
140-
</ngx-material-page-content>
141-
</ngx-material-page-loader>
140+
</mat-page-content>
141+
</mat-page-loader>
142142

143143

144144
<!--3-->
145-
<ngx-material-page-loader>
146-
<ngx-material-page-outlook title="Peer dependencies">
147-
</ngx-material-page-outlook>
148-
<ngx-material-page-content>
145+
<mat-page-loader>
146+
<mat-page-outlook title="Peer dependencies">
147+
</mat-page-outlook>
148+
<mat-page-content>
149149
<mat-card-title>Animations + Material + CDK + FlexLayout + Firebase + Angularfire2</mat-card-title>
150150
<div class="comment-container">
151151
<p><a href="https://www.npmjs.com/package/ngx-auth-firebaseui"
@@ -244,15 +244,15 @@ <h1>Getting Started</h1>
244244
</button>
245245
</div>
246246

247-
</ngx-material-page-content>
248-
</ngx-material-page-loader>
247+
</mat-page-content>
248+
</mat-page-loader>
249249

250250

251251
<!--4-->
252-
<ngx-material-page-loader>
253-
<ngx-material-page-outlook title="Material Theme">
254-
</ngx-material-page-outlook>
255-
<ngx-material-page-content>
252+
<mat-page-loader>
253+
<mat-page-outlook title="Material Theme">
254+
</mat-page-outlook>
255+
<mat-page-content>
256256
<mat-card-title>Styling and more...</mat-card-title>
257257
<div class="comment-container">
258258
<p>In order to use angular material/ material design, we need include at least one theme.
@@ -309,15 +309,15 @@ <h1>Getting Started</h1>
309309
Learn more about angular material themes</a>
310310
</mat-card-footer>
311311
</mat-card>
312-
</ngx-material-page-content>
313-
</ngx-material-page-loader>
312+
</mat-page-content>
313+
</mat-page-loader>
314314

315315

316316
<!--5-->
317-
<ngx-material-page-loader>
318-
<ngx-material-page-outlook title="Material Icons">
319-
</ngx-material-page-outlook>
320-
<ngx-material-page-content>
317+
<mat-page-loader>
318+
<mat-page-outlook title="Material Icons">
319+
</mat-page-outlook>
320+
<mat-page-content>
321321
<mat-card-title>Linking the icons</mat-card-title>
322322
<mat-card-content>
323323
<div class="comment-container">
@@ -432,15 +432,15 @@ <h1>Getting Started</h1>
432432
<mat-icon>link</mat-icon>
433433
Learn more about angular material icons</a>
434434
</mat-card-footer>
435-
</ngx-material-page-content>
436-
</ngx-material-page-loader>
435+
</mat-page-content>
436+
</mat-page-loader>
437437

438438

439439
<!--6-->
440-
<ngx-material-page-loader>
441-
<ngx-material-page-outlook title="Installation">
442-
</ngx-material-page-outlook>
443-
<ngx-material-page-content>
440+
<mat-page-loader>
441+
<mat-page-outlook title="Installation">
442+
</mat-page-outlook>
443+
<mat-page-content>
444444
<mat-card-title>Here we go
445445
<mat-icon>flight_takeoff</mat-icon>
446446
</mat-card-title>
@@ -557,14 +557,14 @@ <h1>Getting Started</h1>
557557
<mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
558558
</button>
559559
</div>
560-
</ngx-material-page-content>
561-
</ngx-material-page-loader>
560+
</mat-page-content>
561+
</mat-page-loader>
562562

563563

564564
<!--7-->
565-
<ngx-material-page-loader>
566-
<ngx-material-page-outlook title="Copy Asset to angular.json"></ngx-material-page-outlook>
567-
<ngx-material-page-content>
565+
<mat-page-loader>
566+
<mat-page-outlook title="Copy Asset to angular.json"></mat-page-outlook>
567+
<mat-page-content>
568568
<mat-card-title>We need ngx-auth-firebaseui's assets</mat-card-title>
569569

570570
<mat-card>
@@ -619,14 +619,14 @@ <h1>Getting Started</h1>
619619
</mat-card-content>
620620
</mat-card>
621621

622-
</ngx-material-page-content>
623-
</ngx-material-page-loader>
622+
</mat-page-content>
623+
</mat-page-loader>
624624

625625
<!--8-->
626-
<ngx-material-page-loader>
627-
<ngx-material-page-outlook title="Usage">
628-
</ngx-material-page-outlook>
629-
<ngx-material-page-content>
626+
<mat-page-loader>
627+
<mat-page-outlook title="Usage">
628+
</mat-page-outlook>
629+
<mat-page-content>
630630
<mat-card-title>Library's components</mat-card-title>
631631
<mat-card-subtitle>This library consists of 2 essential components.</mat-card-subtitle>
632632

@@ -657,15 +657,15 @@ <h1>Getting Started</h1>
657657
<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>
658658
</mat-card-content>
659659
</mat-card>
660-
</ngx-material-page-content>
661-
</ngx-material-page-loader>
660+
</mat-page-content>
661+
</mat-page-loader>
662662

663663
<!--8-->
664-
<ngx-material-page-loader>
665-
<ngx-material-page-outlook title="Run demo locally">
664+
<mat-page-loader>
665+
<mat-page-outlook title="Run demo locally">
666666
<img style="width: 50px; height: 50px" src="../../assets/icons/github.svg">
667-
</ngx-material-page-outlook>
668-
<ngx-material-page-content>
667+
</mat-page-outlook>
668+
<mat-page-content>
669669
<mat-card-title-group><a href="https://github.com/AnthonyNahas/ngx-auth-firebaseui"
670670
mat-button
671671
color="primary">Clone the repo</a></mat-card-title-group>
@@ -758,9 +758,9 @@ <h1>Getting Started</h1>
758758
<div class="comment-container">
759759
<p>the app is now hosted on http://localhost:4200/</p>
760760
</div>
761-
</ngx-material-page-content>
762-
</ngx-material-page-loader>
763-
</ngx-material-pages>
761+
</mat-page-content>
762+
</mat-page-loader>
763+
</mat-pages>
764764

765765
</div>
766766

‎demo/src/app/shared/shared.module.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ import {AngularFirestoreModule} from '@angular/fire/firestore';
1919
import {BadgesComponent} from './badges/badges.component';
2020
import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';
2121
import {HighlightModule} from 'ngx-highlightjs';
22-
import {NgxMaterialPagesModule} from 'ngx-material-pages';
22+
import {MatPagesModule} from '@angular-material-extensions/pages';
2323

2424
@NgModule({
2525
imports: [
2626
RouterModule,
2727
NgbCollapseModule.forRoot(),
2828
HighlightModule,
2929
NgxAuthFirebaseUIModule,
30-
NgxMaterialPagesModule,
30+
MatPagesModule,
3131
FlexLayoutModule,
3232
MatToolbarModule,
3333
MatTabsModule,
@@ -45,7 +45,7 @@ import {NgxMaterialPagesModule} from 'ngx-material-pages';
4545
ContentWrapperComponent,
4646
HighlightModule,
4747
NgxAuthFirebaseUIModule,
48-
NgxMaterialPagesModule,
48+
MatPagesModule,
4949
BadgesComponent,
5050
FlexLayoutModule,
5151
MatToolbarModule,

0 commit comments

Comments
 (0)