Skip to content

Commit b54c6c0

Browse files
SazeidyaSazeidya
committed
feat(angular15): updated Angular Material to v15 (via ng update command) + updated demo app
updated Angular Material to v15; updated demo application to use new angular material components introduced with v15
1 parent c7f2070 commit b54c6c0

File tree

14 files changed

+1982
-329
lines changed

14 files changed

+1982
-329
lines changed

‎angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@
193193
"cli": {
194194
"schematicCollections": [
195195
"@angular-eslint/schematics"
196-
]
196+
],
197+
"analytics": false
197198
}
198199
}

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"@angular/compiler": "^15.0.1",
2424
"@angular/core": "^15.0.1",
2525
"@angular/forms": "^15.0.1",
26-
"@angular/material": "^14.0.5",
26+
"@angular/material": "^15.0.0",
2727
"@angular/platform-browser": "^15.0.1",
2828
"@angular/platform-browser-dynamic": "^15.0.1",
2929
"@angular/router": "^15.0.1",
@@ -80,4 +80,4 @@
8080
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
8181
}
8282
}
83-
}
83+
}

‎src/app/dummy-card/dummy-card.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<mat-card *ngFor="let num of array; let isLast = last">
2-
<mat-card-title id="{{ idPrefix + num }}" *ngIf="headings">Prioris generis {{ num }}</mat-card-title>
2+
<mat-card-header>
3+
<mat-card-title id="{{ idPrefix + num }}" *ngIf="headings">Prioris generis {{ num }}</mat-card-title>
4+
</mat-card-header>
35
<mat-card-content>
46
<app-dummy-content></app-dummy-content>
57
</mat-card-content>

‎src/app/home/home.component.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
11
<mat-card>
2+
<mat-card-header>
23
<mat-card-title id="title">NgxPageScroll Demo application</mat-card-title>
4+
</mat-card-header>
5+
<mat-card-content>
36
<p>
4-
This small demo application showcases the usage of the ngx-page-scroll library. Please refer to the <a
5-
href="https://github.com/Nolanus/ngx-page-scroll#readme" target="_blank">Readme for documentation and
6-
instructions</a>. Whenever you encounter an error or have a suggestion for enhancement, don't hesitate to <a
7-
target="_blank" href="https://github.com/Nolanus/ngx-page-scroll/issues/new">file an issue</a> at the <a
8-
target="_blank" href="https://github.com/Nolanus/ngx-page-scroll">project repo on GitHub</a>.
7+
This small demo application showcases the usage of the ngx-page-scroll library. Please refer to the <a
8+
href="https://github.com/Nolanus/ngx-page-scroll#readme" target="_blank">Readme for documentation and
9+
instructions</a>. Whenever you encounter an error or have a suggestion for enhancement, don't hesitate to <a
10+
target="_blank" href="https://github.com/Nolanus/ngx-page-scroll/issues/new">file an issue</a> at the <a
11+
target="_blank" href="https://github.com/Nolanus/ngx-page-scroll">project repo on GitHub</a>.
912
</p>
1013
<p>For debugging purposes you may enable scroll position logging by setting the checkmark at the top right. This
11-
results in all changes to the scrollTop/scrollLeft property to be logged to the console.
14+
results in all changes to the scrollTop/scrollLeft property to be logged to the console.
1215
</p>
16+
</mat-card-content>
1317
</mat-card>
1418

1519
<mat-card>
20+
<mat-card-content>
1621
<p>
17-
These two buttons have a "routerLink" and "href" attribute set. In combination with the pageScroll directive
18-
this results in a press opening the new route and scrolling to the referred DOM element.
22+
These two buttons have a "routerLink" and "href" attribute set. In combination with the pageScroll directive
23+
this results in a press opening the new route and scrolling to the referred DOM element.
1924
</p>
2025
<button routerLink="/simple" mat-raised-button color="primary" href="#head1" pageScroll [pageScrollInView]="false" id="demoScroll1">
21-
Scroll to first heading on "simple scrolling" page
26+
Scroll to first heading on "simple scrolling" page
2227
</button>
2328

2429
<button routerLink="/simple" mat-raised-button color="primary" href="#head3" pageScroll id="demoScroll2">
25-
Scroll to third heading on "simple scrolling" page
30+
Scroll to third heading on "simple scrolling" page
2631
</button>
32+
</mat-card-content>
2733
</mat-card>

‎src/app/horizontal-scroll/horizontal-scroll.component.html‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
<mat-card>
2-
<mat-card-title id="title">Horizontal scrolling</mat-card-title>
3-
<p>
4-
Showcasing the horizontal scrolling inside a custom container. Triggering is done using the scroll service.
5-
</p>
6-
<button mat-raised-button color="primary" (click)="scrollHorizontal()" id="startHorizontalScrollingButton">scroll
7-
inside the card
8-
</button>
9-
<button mat-raised-button color="primary" (click)="scrollHorizontalStart()" id="startHorizontalStartScrollingButton">
10-
scroll back to start
11-
</button>
2+
<mat-card-header>
3+
<mat-card-title id="title">Horizontal scrolling</mat-card-title>
4+
</mat-card-header>
5+
<mat-card-content>
6+
<p>
7+
Showcasing the horizontal scrolling inside a custom container. Triggering is done using the scroll service.
8+
</p>
9+
<button mat-raised-button color="primary" (click)="scrollHorizontal()" id="startHorizontalScrollingButton">scroll
10+
inside the card
11+
</button>
12+
<button mat-raised-button color="primary" (click)="scrollHorizontalStart()" id="startHorizontalStartScrollingButton">
13+
scroll back to start
14+
</button>
15+
</mat-card-content>
1216
</mat-card>
1317

1418
<mat-card>
15-
<mat-card-title>A card</mat-card-title>
19+
<mat-card-header>
20+
<mat-card-title>A card</mat-card-title>
21+
</mat-card-header>
1622
<mat-card-content #container class="scroll-box">
1723
<div>
1824
<p id="horizontalContainerStart">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

‎src/app/namespace-scroll/namespace-scroll.component.html‎

Lines changed: 96 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,122 @@
11
<mat-card>
2-
<mat-card-title id="title">Namespace scrolling</mat-card-title>
3-
<p>
4-
This page demonstrates the interaction with running scroll animation, especially if there are multiple ones.
5-
Each scroll animation belongs to a <code>namespace</code>. The default namespace value is <i>default</i>. Whenever a
6-
new scroll animation for the same namespace is started, all running ones will be stopped. This is allows to prevent
7-
two scrolling animations acting on the same scrollView DOM element, where each interferes with the other ones.
8-
All scroll animations on the same scrollView should thus share the same namespace.
9-
</p>
2+
<mat-card-header>
3+
<mat-card-title id="title">Namespace scrolling</mat-card-title>
4+
</mat-card-header>
5+
<mat-card-content>
6+
<p>
7+
This page demonstrates the interaction with running scroll animation, especially if there are multiple ones.
8+
Each scroll animation belongs to a <code>namespace</code>. The default namespace value is <i>default</i>. Whenever a
9+
new scroll animation for the same namespace is started, all running ones will be stopped. This is allows to prevent
10+
two scrolling animations acting on the same scrollView DOM element, where each interferes with the other ones.
11+
All scroll animations on the same scrollView should thus share the same namespace.
12+
</p>
13+
</mat-card-content>
1014
</mat-card>
1115

12-
<mat-card class="flex-mat-card-container">
13-
14-
<div class="flex-container">
15-
<h3 class="flex-header">Namespace <code>default</code></h3>
16-
<button mat-raised-button color="primary" (click)="startDefaultNamespaceScrolls()"
17-
id="startDefaultNamespaceScrollsButton" matTooltip="Start scroll animation">
18-
<mat-icon>play_arrow</mat-icon>
19-
</button>
20-
<button mat-raised-button color="primary" (click)="pageScrollService.stopAll('default')"
21-
id="stopDefaultNamespaceScrollsButton" matTooltip="Stop scroll animation">
22-
<mat-icon>stop</mat-icon>
23-
</button>
24-
<button mat-raised-button color="primary" (click)="resetDefaultNameScrolls()"
25-
id="resetDefaultNamespaceScrollsButton" matTooltip="Scroll container to top">
26-
<mat-icon>replay</mat-icon>
27-
</button>
28-
</div>
29-
30-
<div class="flex-container">
31-
<h3 class="flex-header">Namespace <code>customSpace</code></h3>
32-
<button mat-raised-button color="primary" (click)="startCustomNamespaceScroll()"
33-
id="startCustomNamespaceScrollsButton" matTooltip="Start scroll animation">
34-
<mat-icon>play_arrow</mat-icon>
35-
</button>
36-
<button mat-raised-button color="primary" (click)="pageScrollService.stopAll('customSpace')"
37-
id="stopCustomNamespaceScrollsButton" matTooltip="Stop scroll animation">
38-
<mat-icon>stop</mat-icon>
39-
</button>
40-
<button mat-raised-button color="primary" (click)="resetCustomNamespaceScroll()"
41-
id="resetCustomNamespaceScrollsButton" matTooltip="Scroll container to top">
42-
<mat-icon>replay</mat-icon>
43-
</button>
44-
</div>
45-
<div class="flex-container">
46-
<h3 class="flex-header">All Namespaces</h3>
47-
<button mat-raised-button color="primary" (click)="pageScrollService.stopAll()"
48-
id="stopAllNamespaceScrollsButton" matTooltip="Stop all scroll animations">
49-
<mat-icon>stop</mat-icon>
50-
</button>
51-
</div>
16+
<mat-card>
17+
<mat-card-content class="flex-mat-card-container">
18+
<div class="flex-container">
19+
<h3 class="flex-header">Namespace <code>default</code></h3>
20+
<button mat-mini-fab color="primary" (click)="startDefaultNamespaceScrolls()"
21+
id="startDefaultNamespaceScrollsButton" matTooltip="Start scroll animation">
22+
<mat-icon>play_arrow</mat-icon>
23+
</button>
24+
<button mat-mini-fab color="primary" (click)="pageScrollService.stopAll('default')"
25+
id="stopDefaultNamespaceScrollsButton" matTooltip="Stop scroll animation">
26+
<mat-icon>stop</mat-icon>
27+
</button>
28+
<button mat-mini-fab color="primary" (click)="resetDefaultNameScrolls()"
29+
id="resetDefaultNamespaceScrollsButton" matTooltip="Scroll container to top">
30+
<mat-icon>replay</mat-icon>
31+
</button>
32+
</div>
33+
34+
<div class="flex-container">
35+
<h3 class="flex-header">Namespace <code>customSpace</code></h3>
36+
<button mat-mini-fab color="primary" (click)="startCustomNamespaceScroll()"
37+
id="startCustomNamespaceScrollsButton" matTooltip="Start scroll animation">
38+
<mat-icon>play_arrow</mat-icon>
39+
</button>
40+
<button mat-mini-fab color="primary" (click)="pageScrollService.stopAll('customSpace')"
41+
id="stopCustomNamespaceScrollsButton" matTooltip="Stop scroll animation">
42+
<mat-icon>stop</mat-icon>
43+
</button>
44+
<button mat-mini-fab color="primary" (click)="resetCustomNamespaceScroll()"
45+
id="resetCustomNamespaceScrollsButton" matTooltip="Scroll container to top">
46+
<mat-icon>replay</mat-icon>
47+
</button>
48+
</div>
49+
<div class="flex-container">
50+
<h3 class="flex-header">All Namespaces</h3>
51+
<button mat-mini-fab color="primary" (click)="pageScrollService.stopAll()"
52+
id="stopAllNamespaceScrollsButton" matTooltip="Stop all scroll animations">
53+
<mat-icon>stop</mat-icon>
54+
</button>
55+
</div>
56+
</mat-card-content>
5257
</mat-card>
5358

54-
<mat-card class="flex-mat-card-container">
55-
<div>
56-
<h4>Namespace default</h4>
57-
<div #container1 id="container1" class="scrollContainer">
59+
<mat-card>
60+
<mat-card-content class="flex-mat-card-container">
61+
<div>
62+
<h4>Namespace default</h4>
63+
<div #container1 id="container1" class="scrollContainer">
5864

59-
<p id="container1Head">
60-
This containers scroll animation is started at the same time like the second one.
61-
As both are in the same namespace, this one's will be stopped at the moment the second one starts scrolling.
62-
</p>
65+
<p id="container1Head">
66+
This containers scroll animation is started at the same time like the second one.
67+
As both are in the same namespace, this one's will be stopped at the moment the second one starts scrolling.
68+
</p>
6369

64-
<app-dummy-content [length]="4"></app-dummy-content>
70+
<app-dummy-content [length]="4"></app-dummy-content>
6571

66-
<p>
67-
<button mat-raised-button color="warn" id="scrollTarget1">Target</button>
68-
</p>
72+
<p>
73+
<button mat-raised-button color="warn" id="scrollTarget1">Target</button>
74+
</p>
6975

70-
<app-dummy-content [length]="4"></app-dummy-content>
76+
<app-dummy-content [length]="4"></app-dummy-content>
7177

78+
</div>
7279
</div>
73-
</div>
7480

75-
<div>
76-
<h4>Namespace <code>default</code></h4>
77-
<div #container2 id="container2" class="scrollContainer">
81+
<div>
82+
<h4>Namespace <code>default</code></h4>
83+
<div #container2 id="container2" class="scrollContainer">
7884

79-
<p id="container2Head">
80-
This containers scroll animation is started at the same time like the first one.
81-
Both are in the same namespace, but this one's is started second and thus actually takes place.
82-
</p>
85+
<p id="container2Head">
86+
This containers scroll animation is started at the same time like the first one.
87+
Both are in the same namespace, but this one's is started second and thus actually takes place.
88+
</p>
8389

84-
<app-dummy-content [length]="4"></app-dummy-content>
90+
<app-dummy-content [length]="4"></app-dummy-content>
8591

86-
<p>
87-
<button mat-raised-button color="warn" id="scrollTarget2">Target</button>
88-
</p>
92+
<p>
93+
<button mat-raised-button color="warn" id="scrollTarget2">Target</button>
94+
</p>
8995

90-
<app-dummy-content [length]="4"></app-dummy-content>
96+
<app-dummy-content [length]="4"></app-dummy-content>
9197

98+
</div>
9299
</div>
93-
</div>
94100

95-
<div>
96-
<h4>Namespace <code>customSpace</code></h4>
97-
<div #container3 id="container3" class="scrollContainer">
101+
<div>
102+
<h4>Namespace <code>customSpace</code></h4>
103+
<div #container3 id="container3" class="scrollContainer">
98104

99-
<p id="container3Head">
100-
This containers scroll animation uses a custom namespace <code>customSpace</code>.
101-
It is therefore capable to scroll independently of the status of the <code>default</code> namespace
102-
animations.
103-
</p>
105+
<p id="container3Head">
106+
This containers scroll animation uses a custom namespace <code>customSpace</code>.
107+
It is therefore capable to scroll independently of the status of the <code>default</code> namespace
108+
animations.
109+
</p>
104110

105-
<app-dummy-content [length]="4"></app-dummy-content>
111+
<app-dummy-content [length]="4"></app-dummy-content>
106112

107-
<p>
108-
<button mat-raised-button color="warn" id="scrollTarget3">Target</button>
109-
</p>
113+
<p>
114+
<button mat-raised-button color="warn" id="scrollTarget3">Target</button>
115+
</p>
110116

111-
<app-dummy-content [length]="4"></app-dummy-content>
117+
<app-dummy-content [length]="4"></app-dummy-content>
112118

119+
</div>
113120
</div>
114-
</div>
121+
</mat-card-content>
115122
</mat-card>

0 commit comments

Comments
 (0)