Skip to content

Commit 3f1404c

Browse files
loianeloiane
authored
Merge pull request #367 from loiane/angularv17
Angularv17
2 parents 61ea450 + f3eab91 commit 3f1404c

27 files changed

+173
-252
lines changed

‎crud-angular-spring/crud-angular/angular.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,18 @@
7373
"builder": "@angular-devkit/build-angular:dev-server",
7474
"configurations": {
7575
"production": {
76-
"browserTarget": "crud-angular:build:production"
76+
"buildTarget": "crud-angular:build:production"
7777
},
7878
"development": {
79-
"browserTarget": "crud-angular:build:development"
79+
"buildTarget": "crud-angular:build:development"
8080
}
8181
},
8282
"defaultConfiguration": "development"
8383
},
8484
"extract-i18n": {
8585
"builder": "@angular-devkit/build-angular:extract-i18n",
8686
"options": {
87-
"browserTarget": "crud-angular:build"
87+
"buildTarget": "crud-angular:build"
8888
}
8989
},
9090
"test": {

‎crud-angular-spring/crud-angular/package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,24 @@
1010
},
1111
"private": true,
1212
"dependencies": {
13-
"@angular/animations": "^15.0.4",
14-
"@angular/cdk": "^15.0.3",
15-
"@angular/common": "^15.0.4",
16-
"@angular/compiler": "^15.0.4",
17-
"@angular/core": "^15.0.4",
18-
"@angular/forms": "^15.0.4",
19-
"@angular/material": "^15.0.3",
20-
"@angular/platform-browser": "^15.0.4",
21-
"@angular/platform-browser-dynamic": "^15.0.4",
22-
"@angular/router": "^15.0.4",
13+
"@angular/animations": "^17.0.7",
14+
"@angular/cdk": "^17.0.4",
15+
"@angular/common": "^17.0.7",
16+
"@angular/compiler": "^17.0.7",
17+
"@angular/core": "^17.0.7",
18+
"@angular/forms": "^17.0.7",
19+
"@angular/material": "^17.0.4",
20+
"@angular/platform-browser": "^17.0.7",
21+
"@angular/platform-browser-dynamic": "^17.0.7",
22+
"@angular/router": "^17.0.7",
2323
"rxjs": "~6.6.0",
2424
"tslib": "^2.3.0",
25-
"zone.js": "~0.11.4"
25+
"zone.js": "~0.14.2"
2626
},
2727
"devDependencies": {
28-
"@angular-devkit/build-angular": "^15.0.4",
29-
"@angular/cli": "^15.0.4",
30-
"@angular/compiler-cli": "^15.0.4",
28+
"@angular-devkit/build-angular": "^17.0.7",
29+
"@angular/cli": "^17.0.7",
30+
"@angular/compiler-cli": "^17.0.7",
3131
"@types/jasmine": "~3.8.0",
3232
"@types/node": "^12.11.1",
3333
"jasmine-core": "~3.8.0",
@@ -36,6 +36,6 @@
3636
"karma-coverage": "~2.0.3",
3737
"karma-jasmine": "~4.0.0",
3838
"karma-jasmine-html-reporter": "~1.7.0",
39-
"typescript": "~4.8.4"
39+
"typescript": "~5.2.2"
4040
}
4141
}

‎crud-angular-spring/crud-angular/src/app/app-routing.module.ts

-16
This file was deleted.

‎crud-angular-spring/crud-angular/src/app/app.component.spec.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@ import { AppComponent } from './app.component';
55
describe('AppComponent', () => {
66
beforeEach(async () => {
77
await TestBed.configureTestingModule({
8-
imports: [
9-
RouterTestingModule
10-
],
11-
declarations: [
8+
imports: [
9+
RouterTestingModule,
1210
AppComponent
13-
],
14-
}).compileComponents();
11+
],
12+
}).compileComponents();
1513
});
1614

1715
it('should create the app', () => {

‎crud-angular-spring/crud-angular/src/app/app.component.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { Component } from '@angular/core';
2+
import { RouterOutlet } from '@angular/router';
3+
import { MatToolbarModule } from '@angular/material/toolbar';
24

35
@Component({
4-
selector: 'app-root',
5-
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.scss']
6+
selector: 'app-root',
7+
templateUrl: './app.component.html',
8+
styleUrls: ['./app.component.scss'],
9+
standalone: true,
10+
imports: [MatToolbarModule, RouterOutlet]
711
})
812
export class AppComponent {
913
title = 'crud-angular';

‎crud-angular-spring/crud-angular/src/app/app.module.ts

-24
This file was deleted.

‎crud-angular-spring/crud-angular/src/app/app.routes.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const APP_ROUTES: Routes = [
4+
{ path: '', pathMatch: 'full', redirectTo: 'courses' },
5+
{
6+
path: 'courses',
7+
loadChildren: () => import('./courses/courses.routes').then(m => m.COURSES_ROUTES)
8+
}
9+
];

‎crud-angular-spring/crud-angular/src/app/courses/components/courses-list/courses-list.component.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ describe('CoursesListComponent', () => {
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
declarations: [ CoursesListComponent ]
12-
})
11+
imports: [CoursesListComponent]
12+
})
1313
.compileComponents();
1414

1515
fixture = TestBed.createComponent(CoursesListComponent);

‎crud-angular-spring/crud-angular/src/app/courses/components/courses-list/courses-list.component.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
22

33
import { Course } from '../../model/course';
4+
import { CategoryPipe } from '../../../shared/pipes/category.pipe';
5+
import { MatButtonModule } from '@angular/material/button';
6+
import { MatIconModule } from '@angular/material/icon';
7+
import { MatTableModule } from '@angular/material/table';
48

59
@Component({
6-
selector: 'app-courses-list',
7-
templateUrl: './courses-list.component.html',
8-
styleUrls: ['./courses-list.component.scss']
10+
selector: 'app-courses-list',
11+
templateUrl: './courses-list.component.html',
12+
styleUrls: ['./courses-list.component.scss'],
13+
standalone: true,
14+
imports: [MatTableModule, MatIconModule, MatButtonModule, CategoryPipe]
915
})
1016
export class CoursesListComponent implements OnInit {
1117

‎crud-angular-spring/crud-angular/src/app/courses/containers/course-form/course-form.component.html

+31-37
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<mat-form-field class="full-width">
77
<input matInput placeholder="Nome" formControlName="name" #name />
88
<mat-hint align="end">{{ name.value.length || 0 }} / 100</mat-hint>
9-
<mat-error *ngIf="form.get('name')?.invalid">{{
10-
formUtils.getErrorMessage(form, "name")
11-
}}</mat-error>
9+
@if (form.get('name')?.invalid) {
10+
<mat-error>{{ formUtils.getErrorMessage(form, "name") }}</mat-error>
11+
}
1212
</mat-form-field>
1313

1414
<mat-form-field class="full-width">
@@ -17,9 +17,9 @@
1717
<mat-option value="Front-end">Front-End</mat-option>
1818
<mat-option value="Back-end">Back-End</mat-option>
1919
</mat-select>
20-
<mat-error *ngIf="form.get('category')?.invalid">{{
21-
formUtils.getErrorMessage(form, "category")
22-
}}</mat-error>
20+
@if (form.get('category')?.invalid) {
21+
<mat-error>{{ formUtils.getErrorMessage(form, "category") }}</mat-error>
22+
}
2323
</mat-form-field>
2424

2525
<mat-toolbar>
@@ -29,51 +29,44 @@
2929
</button>
3030
</mat-toolbar>
3131

32-
<mat-error
33-
*ngIf="formUtils.isFormArrayRequired(form, 'lessons')"
34-
class="form-array-error"
32+
@if (formUtils.isFormArrayRequired(form, 'lessons')) {
33+
<mat-error class="form-array-error"
3534
>Adicione pelo menos uma aula.
3635
</mat-error>
37-
38-
<table
39-
style="width: 100%"
40-
formArrayName="lessons"
41-
*ngFor="let lesson of getLessonsFormArray(); let i = index"
42-
>
36+
} @for (lesson of getLessonsFormArray(); track lesson; let i = $index) {
37+
<table style="width: 100%" formArrayName="lessons">
4338
<tr [formGroupName]="i">
4439
<td style="width: 65%">
4540
<mat-form-field class="full-width">
4641
<mat-label>Nome da Aula</mat-label>
4742
<input matInput formControlName="name" />
48-
<mat-error
49-
*ngIf="getLessonsFormArray()[i].get('name')?.invalid"
50-
>{{
51-
formUtils.getFormArrayFieldErrorMessage(
52-
form,
53-
"lessons",
54-
"name",
55-
i
56-
)
57-
}}</mat-error
58-
>
43+
@if (getLessonsFormArray()[i].get('name')?.invalid) {
44+
<mat-error>{{
45+
formUtils.getFormArrayFieldErrorMessage(
46+
form,
47+
"lessons",
48+
"name",
49+
i
50+
)
51+
}}</mat-error>
52+
}
5953
</mat-form-field>
6054
</td>
6155
<td style="width: 30%">
6256
<mat-form-field class="full-width">
6357
<mat-label>URL</mat-label>
6458
<span matPrefix>https://youtu.be/</span>
6559
<input matInput formControlName="youtubeUrl" />
66-
<mat-error
67-
*ngIf="getLessonsFormArray()[i].get('youtubeUrl')?.invalid"
68-
>{{
69-
formUtils.getFormArrayFieldErrorMessage(
70-
form,
71-
"lessons",
72-
"youtubeUrl",
73-
i
74-
)
75-
}}</mat-error
76-
>
60+
@if (getLessonsFormArray()[i].get('youtubeUrl')?.invalid) {
61+
<mat-error>{{
62+
formUtils.getFormArrayFieldErrorMessage(
63+
form,
64+
"lessons",
65+
"youtubeUrl",
66+
i
67+
)
68+
}}</mat-error>
69+
}
7770
</mat-form-field>
7871
</td>
7972
<td>
@@ -83,6 +76,7 @@
8376
</td>
8477
</tr>
8578
</table>
79+
}
8680
</form>
8781
</mat-card-content>
8882

‎crud-angular-spring/crud-angular/src/app/courses/containers/course-form/course-form.component.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ describe('CourseFormComponent', () => {
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
declarations: [ CourseFormComponent ]
12-
})
11+
imports: [CourseFormComponent]
12+
})
1313
.compileComponents();
1414
});
1515

‎crud-angular-spring/crud-angular/src/app/courses/containers/course-form/course-form.component.ts

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import { Location } from '@angular/common';
22
import { Component, OnInit } from '@angular/core';
3-
import { FormGroup, NonNullableFormBuilder, UntypedFormArray, Validators } from '@angular/forms';
3+
import { FormGroup, NonNullableFormBuilder, UntypedFormArray, Validators, ReactiveFormsModule } from '@angular/forms';
44
import { MatSnackBar } from '@angular/material/snack-bar';
55
import { ActivatedRoute } from '@angular/router';
66

77
import { Course } from '../../model/course';
88
import { CoursesService } from '../../services/courses.service';
99
import { FormUtilsService } from './../../../shared/form/form-utils.service';
1010
import { Lesson } from './../../model/lesson';
11+
import { MatIconModule } from '@angular/material/icon';
12+
import { MatButtonModule } from '@angular/material/button';
13+
import { MatOptionModule } from '@angular/material/core';
14+
import { MatSelectModule } from '@angular/material/select';
15+
import { MatInputModule } from '@angular/material/input';
16+
import { MatFormFieldModule } from '@angular/material/form-field';
17+
import { MatToolbarModule } from '@angular/material/toolbar';
18+
import { MatCardModule } from '@angular/material/card';
1119

1220
@Component({
13-
selector: 'app-course-form',
14-
templateUrl: './course-form.component.html',
15-
styleUrls: ['./course-form.component.scss']
21+
selector: 'app-course-form',
22+
templateUrl: './course-form.component.html',
23+
styleUrls: ['./course-form.component.scss'],
24+
standalone: true,
25+
imports: [MatCardModule, MatToolbarModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatOptionModule, MatButtonModule, MatIconModule]
1626
})
1727
export class CourseFormComponent implements OnInit {
1828

‎crud-angular-spring/crud-angular/src/app/courses/containers/courses/courses.component.html

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
<mat-card>
22
<mat-toolbar color="primary">Cursos Disponíveis</mat-toolbar>
33

4-
<div
5-
*ngIf="courses$ | async as courses; else loading"
6-
class="example-container mat-elevation-z8"
7-
>
4+
@if (courses$ | async; as courses) {
5+
<div class="example-container mat-elevation-z8">
86
<app-courses-list
97
[courses]="courses.courses"
108
(add)="onAdd()"
119
(edit)="onEdit($event)"
1210
(remove)="onRemove($event)"
1311
></app-courses-list>
14-
1512
<mat-paginator
1613
[pageSizeOptions]="[5, 10, 15]"
1714
showFirstLastButtons
@@ -23,9 +20,9 @@
2320
>
2421
</mat-paginator>
2522
</div>
26-
<ng-template #loading>
27-
<div class="loading-spinner">
28-
<mat-spinner></mat-spinner>
29-
</div>
30-
</ng-template>
23+
} @else {
24+
<div class="loading-spinner">
25+
<mat-spinner></mat-spinner>
26+
</div>
27+
}
3128
</mat-card>

‎crud-angular-spring/crud-angular/src/app/courses/containers/courses/courses.component.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ describe('CoursesComponent', () => {
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
declarations: [ CoursesComponent ]
12-
})
11+
imports: [CoursesComponent]
12+
})
1313
.compileComponents();
1414
});
1515

0 commit comments

Comments
 (0)