Skip to content

Commit 5382fa9

Browse files
ganatanganatan
committed
Update Angular 14.0.5 & improve bootstrap examples
1 parent 59994c3 commit 5382fa9

File tree

61 files changed

+2750
-660
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+2750
-660
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ it's part of a repo series designed
1212

1313
to create a **Web Application with Angular 14**
1414

15-
* Featuring [**Angular 14.0.4**](https://github.com/angular/angular/releases) & [**Angular CLI 14.0.4**](https://github.com/angular/angular-cli/releases/)
15+
* Featuring [**Angular 14.0.5**](https://github.com/angular/angular/releases) & [**Angular CLI 14.0.5**](https://github.com/angular/angular-cli/releases/)
1616

1717

1818
* See the [**Live demo**](#angular-live-demo), Test the repo with [**Quick start**](#angular-quick-start) and for more information Read the step by step [**Tutorial**](#angular-tutorial) or read the [**Getting started**](#angular-getting-started)

‎angular/package-lock.json‎

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

‎angular/package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-modules",
3-
"version": "14.0.4",
3+
"version": "14.0.5",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve --port 4200",
@@ -13,33 +13,33 @@
1313
},
1414
"private": true,
1515
"dependencies": {
16-
"@angular/animations": "14.0.4",
17-
"@angular/common": "14.0.4",
18-
"@angular/compiler": "14.0.4",
19-
"@angular/core": "14.0.4",
20-
"@angular/forms": "14.0.4",
21-
"@angular/platform-browser": "14.0.4",
22-
"@angular/platform-browser-dynamic": "14.0.4",
23-
"@angular/router": "14.0.4",
16+
"@angular/animations": "14.0.5",
17+
"@angular/common": "14.0.5",
18+
"@angular/compiler": "14.0.5",
19+
"@angular/core": "14.0.5",
20+
"@angular/forms": "14.0.5",
21+
"@angular/platform-browser": "14.0.5",
22+
"@angular/platform-browser-dynamic": "14.0.5",
23+
"@angular/router": "14.0.5",
2424
"@fortawesome/fontawesome-free": "6.1.1",
2525
"bootstrap": "5.1.3",
2626
"rxjs": "7.5.5",
2727
"tslib": "2.4.0",
2828
"zone.js": "0.11.6"
2929
},
3030
"devDependencies": {
31-
"@angular-devkit/build-angular": "14.0.4",
31+
"@angular-devkit/build-angular": "14.0.5",
3232
"@angular-eslint/builder": "14.0.0",
3333
"@angular-eslint/eslint-plugin": "14.0.0",
3434
"@angular-eslint/eslint-plugin-template": "14.0.0",
3535
"@angular-eslint/schematics": "14.0.0",
3636
"@angular-eslint/template-parser": "14.0.0",
37-
"@angular/cli": "14.0.4",
38-
"@angular/compiler-cli": "14.0.4",
37+
"@angular/cli": "14.0.5",
38+
"@angular/compiler-cli": "14.0.5",
3939
"@types/jasmine": "4.0.3",
40-
"@typescript-eslint/eslint-plugin": "5.30.0",
41-
"@typescript-eslint/parser": "5.30.0",
42-
"eslint": "8.18.0",
40+
"@typescript-eslint/eslint-plugin": "5.30.5",
41+
"@typescript-eslint/parser": "5.30.5",
42+
"eslint": "8.19.0",
4343
"jasmine-core": "4.2.0",
4444
"karma": "6.4.0",
4545
"karma-chrome-launcher": "3.1.1",

‎angular/src/app/modules/application/example-bootstrap/00-main/items.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,14 @@ export const ITEMS: any[] =
1111
{ id: 9, name: 'Collapse', link: 'collapse', icon: 'fas fa-balance-scale-right' },
1212
{ id: 10, name: 'Dropdowns', link: 'dropdowns', icon: 'fas fa-bahai' },
1313
{ id: 11, name: 'Forms', link: 'forms', icon: 'fas fa-basketball-ball' },
14-
{ id: 12, name: 'Images', link: 'images', icon: 'fab fa-battle-net' },
14+
{ id: 12, name: 'List-group', link: 'list-group', icon: 'fab fa-battle-net' },
1515
{ id: 13, name: 'Modal', link: 'modal', icon: 'fab fa-canadian-maple-leaf' },
1616
{ id: 14, name: 'Pagination', link: 'pagination', icon: 'far fa-address-card' },
17-
{ id: 15, name: 'Radio', link: 'radio', icon: 'fas fa-cart-plus' },
18-
{ id: 16, name: 'Select', link: 'select', icon: 'fab fa-centos' },
19-
{ id: 17, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' },
20-
{ id: 18, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' },
21-
{ id: 19, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' },
22-
{ id: 20, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' },
23-
{ id: 21, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' },
24-
{ id: 22, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' },
25-
{ id: 23, name: 'Typography', link: 'typography', icon: 'fas fa-dove' },
17+
{ id: 15, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' },
18+
{ id: 16, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' },
19+
{ id: 17, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' },
20+
{ id: 18, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' },
21+
{ id: 19, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' },
22+
{ id: 20, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' },
23+
{ id: 21, name: 'Typography', link: 'typography', icon: 'fas fa-dove' },
2624
];

‎angular/src/app/modules/application/example-bootstrap/alerts/items.component.html‎

Lines changed: 0 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -116,121 +116,3 @@ <h1 class="card-title text-primary">Alerts with Font Awesome Icon</h1>
116116
</div>
117117
</div>
118118
</div>
119-
120-
<!--<div class="card mb-2">
121-
<div class="card-body">
122-
<h1 class="card-title text-primary">Alerts</h1>
123-
<div class="alert alert-warning alert-dismissible fade show" role="alert">
124-
<strong>Alien Covenant!</strong> Warning Movie with custom close button.
125-
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
126-
</div>
127-
<div class="alert alert-primary alert-dismissible fade show" role="alert" data-tor="show:scale.from(0)">
128-
<strong>Alien Prometheus!</strong> Primary Movie with custom close button.
129-
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
130-
</div>
131-
</div>
132-
</div>
133-
134-
135-
<div class="card mb-2">
136-
<div class="card-body">
137-
<h1 class="card-title text-primary">Alerts</h1>
138-
<div class="alert alert-primary" role="alert">
139-
A simple primary alert—check it out!
140-
</div>
141-
<div class="alert alert-secondary" role="alert">
142-
A simple secondary alert—check it out!
143-
</div>
144-
<div class="alert alert-success" role="alert">
145-
A simple success alert—check it out!
146-
</div>
147-
<div class="alert alert-danger" role="alert">
148-
A simple danger alert—check it out!
149-
</div>
150-
<div class="alert alert-warning" role="alert">
151-
A simple warning alert—check it out!
152-
</div>
153-
<div class="alert alert-info" role="alert">
154-
A simple info alert—check it out!
155-
</div>
156-
<div class="alert alert-light" role="alert">
157-
A simple light alert—check it out!
158-
</div>
159-
<div class="alert alert-dark" role="alert">
160-
A simple dark alert—check it out!
161-
</div>
162-
</div>
163-
</div>
164-
165-
<div class="card mb-2">
166-
<div class="card-body">
167-
<h1 class="card-title text-primary">Alerts</h1>
168-
169-
<div class="alert alert-primary" role="alert">
170-
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you
171-
like.
172-
</div>
173-
<div class="alert alert-secondary" role="alert">
174-
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you
175-
like.
176-
</div>
177-
<div class="alert alert-success" role="alert">
178-
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you
179-
like.
180-
</div>
181-
<div class="alert alert-danger" role="alert">
182-
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you
183-
like.
184-
</div>
185-
<div class="alert alert-warning" role="alert">
186-
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you
187-
like.
188-
</div>
189-
<div class="alert alert-info" role="alert">
190-
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
191-
</div>
192-
<div class="alert alert-light" role="alert">
193-
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
194-
</div>
195-
<div class="alert alert-dark" role="alert">
196-
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
197-
</div>
198-
</div>
199-
</div>
200-
201-
<div class="card mb-2">
202-
<div class="card-body">
203-
<h1 class="card-title text-primary">Alerts with Font Awesome Icon</h1>
204-
<div class="alert alert-primary d-flex align-items-center" role="alert">
205-
<div>
206-
<i class="fas fa-rss-square me-1"></i>
207-
An example alert with an icon
208-
</div>
209-
</div>
210-
<div class="alert alert-primary d-flex align-items-center" role="alert">
211-
<div>
212-
<i class="fas fa-rss-square me-1"></i>
213-
An example alert with an icon
214-
</div>
215-
</div>
216-
<div class="alert alert-success d-flex align-items-center" role="alert">
217-
<div>
218-
<i class="fas fa-rss-square me-1"></i>
219-
An example success alert with an icon
220-
</div>
221-
</div>
222-
<div class="alert alert-warning d-flex align-items-center" role="alert">
223-
<div>
224-
<i class="fas fa-rss-square me-1"></i>
225-
An example warning alert with an icon
226-
</div>
227-
</div>
228-
<div class="alert alert-danger d-flex align-items-center" role="alert">
229-
<div>
230-
<i class="fas fa-rss-square me-1"></i>
231-
An example danger alert with an icon
232-
</div>
233-
</div>
234-
</div>
235-
236-
</div>-->

‎angular/src/app/modules/application/example-bootstrap/collapses/items.component.html‎

Lines changed: 10 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<div class="card-body">
33
<h1 class="card-title text-center text-primary">Close collapse with Javascript</h1>
44
<p>
5-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
6-
data-bs-target="#collapseWidthJavascript" aria-expanded="false"
7-
aria-controls="collapseWidthJavascript">
5+
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthJavascript"
6+
aria-expanded="false" aria-controls="collapseWidthJavascript">
87
Toggle width collapse
98
</button>
109
</p>
@@ -23,6 +22,7 @@ <h1 class="card-title text-center text-primary">Close collapse with Javascript</
2322
</p>
2423
</div>
2524
</div>
25+
2626
<div class="card mb-2">
2727
<div class="card-body">
2828
<h1 class="card-title text-center text-primary">Collapse with ahref</h1>
@@ -31,8 +31,8 @@ <h1 class="card-title text-center text-primary">Collapse with ahref</h1>
3131
aria-expanded="false" aria-controls="collapseExample">
3232
Link with href
3333
</a>
34-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
35-
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
34+
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
35+
aria-expanded="false" aria-controls="collapseExample">
3636
Button with data-bs-target
3737
</button>
3838
</p>
@@ -51,8 +51,8 @@ <h1 class="card-title text-center text-primary">Multiple Targets</h1>
5151
<a class="btn btn-primary me-2" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
5252
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
5353
<button class="btn btn-primary me-2" type="button" data-bs-toggle="collapse"
54-
data-bs-target="#multiCollapseExample2" aria-expanded="false"
55-
aria-controls="multiCollapseExample2">Toggle second element</button>
54+
data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle
55+
second element</button>
5656
<button class="btn btn-primary me-2" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
5757
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
5858
elements</button>
@@ -81,8 +81,8 @@ <h1 class="card-title text-center text-primary">Multiple Targets</h1>
8181
<div class="card-body">
8282
<h1 class="card-title text-center text-primary">Horizontal</h1>
8383
<p>
84-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
85-
data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
84+
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample"
85+
aria-expanded="false" aria-controls="collapseWidthExample">
8686
Toggle width collapse
8787
</button>
8888
</p>
@@ -95,82 +95,4 @@ <h1 class="card-title text-center text-primary">Horizontal</h1>
9595
</div>
9696
</div>
9797
</div>
98-
</div>
99-
100-
<!--<div class="row">
101-
<div class="col p-4">
102-
<div class="card mb-2">
103-
<div class="card-body">
104-
<h1 class="card-title text-center text-primary">Collapse with ahref</h1>
105-
<p>
106-
<a class="btn btn-primary ms-1" data-bs-toggle="collapse" href="#collapseExample" role="button"
107-
aria-expanded="false" aria-controls="collapseExample">
108-
Link with href
109-
</a>
110-
<button class="btn btn-primary ms-1" type="button" data-bs-toggle="collapse"
111-
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
112-
Button with data-bs-target
113-
</button>
114-
</p>
115-
<div class="collapse" id="collapseExample">
116-
<div class="card card-body">
117-
Some placeholder content for the collapse component. This panel is hidden by default but revealed when
118-
the user activates the relevant trigger.
119-
</div>
120-
</div>
121-
</div>
122-
</div>
123-
<div class="card mb-2">
124-
<div class="card-body">
125-
<h1 class="card-title text-center text-primary">Multiple Targets</h1>
126-
<p>
127-
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button"
128-
aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
129-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
130-
data-bs-target="#multiCollapseExample2" aria-expanded="false"
131-
aria-controls="multiCollapseExample2">Toggle second element</button>
132-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse"
133-
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
134-
elements</button>
135-
</p>
136-
<div class="row">
137-
<div class="col">
138-
<div class="collapse multi-collapse" id="multiCollapseExample1">
139-
<div class="card card-body">
140-
Some placeholder content for the first collapse component of this multi-collapse example. This
141-
panel is hidden by default but revealed when the user activates the relevant trigger.
142-
</div>
143-
</div>
144-
</div>
145-
<div class="col">
146-
<div class="collapse multi-collapse" id="multiCollapseExample2">
147-
<div class="card card-body">
148-
Some placeholder content for the second collapse component of this multi-collapse example. This
149-
panel is hidden by default but revealed when the user activates the relevant trigger.
150-
</div>
151-
</div>
152-
</div>
153-
</div>
154-
</div>
155-
</div>
156-
<div class="card mb-2">
157-
<div class="card-body">
158-
<h1 class="card-title text-center text-primary">Horizontal</h1>
159-
<p>
160-
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
161-
data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
162-
Toggle width collapse
163-
</button>
164-
</p>
165-
<div style="min-height: 120px;">
166-
<div class="collapse collapse-horizontal" id="collapseWidthExample">
167-
<div class="card card-body" style="width: 300px;">
168-
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when
169-
triggered.
170-
</div>
171-
</div>
172-
</div>
173-
</div>
174-
</div>
175-
</div>
176-
</div>-->
98+
</div>

‎angular/src/app/modules/application/example-bootstrap/collapses/items.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,21 @@ export class CollapsesComponent {
1414

1515
closeCollapse() {
1616
const myCollapse = document.getElementById('collapseWidthJavascript')
17-
const bsCollapse = new bootstrap.Collapse(myCollapse, {
17+
new bootstrap.Collapse(myCollapse, {
1818
hide: true,
1919
})
2020
}
2121

2222
showCollapse() {
2323
const myCollapse = document.getElementById('collapseWidthJavascript')
24-
const bsCollapse = new bootstrap.Collapse(myCollapse, {
24+
new bootstrap.Collapse(myCollapse, {
2525
show: true,
2626
})
2727
}
2828

2929
toggleCollapse() {
3030
const myCollapse = document.getElementById('collapseWidthJavascript')
31-
const bsCollapse = new bootstrap.Collapse(myCollapse, {
31+
new bootstrap.Collapse(myCollapse, {
3232
toggle: true,
3333
})
3434
}

0 commit comments

Comments
 (0)