From dd93fe6a3647ff08a2cf87830d86c4511f7f58d9 Mon Sep 17 00:00:00 2001 From: Faha Abdurakhimov Date: Sun, 8 Dec 2024 20:02:12 +0100 Subject: [PATCH 1/5] test change --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0e2071ecf..8a9042a02 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@

Collection of Angular challenges


+adsfsadfasd ## Intro From 0f92ec1be3c0ae3eab9d6ff63b5614f2b502c07a Mon Sep 17 00:00:00 2001 From: Faha Abdurakhimov Date: Tue, 10 Dec 2024 17:02:20 +0100 Subject: [PATCH 2/5] fix package json --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index c3d9e6ed8..4797f709c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -90,7 +90,7 @@ "jsonc-eslint-parser": "^2.1.0", "lint-staged": "^13.0.3", "ng-packagr": "19.0.1", - "nx": "20.2.0", + "nx": "^20.2.0", "postcss": "^8.4.5", "postcss-import": "~14.1.0", "postcss-preset-env": "~7.5.0", diff --git a/package.json b/package.json index 1db96f21f..27a3f7d1b 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "jsonc-eslint-parser": "^2.1.0", "lint-staged": "^13.0.3", "ng-packagr": "19.0.1", - "nx": "20.2.0", + "nx": "^20.2.0", "postcss": "^8.4.5", "postcss-import": "~14.1.0", "postcss-preset-env": "~7.5.0", From f7fd9cf98776ccb40c231462c15a70c2074fe5b0 Mon Sep 17 00:00:00 2001 From: Fakhriddin Abdurakhimov Date: Sat, 18 Jan 2025 18:16:09 +0100 Subject: [PATCH 3/5] feat(Answer:1): projection --- .../city-card/city-card.component.ts | 50 ++++++++++++- .../student-card/student-card.component.ts | 28 +++++-- .../teacher-card/teacher-card.component.ts | 28 +++++-- .../src/app/ui/card/card.component.ts | 73 +++++++------------ .../app/ui/list-item/list-item.component.ts | 18 +---- 5 files changed, 119 insertions(+), 78 deletions(-) diff --git a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts index 47b089650..3542b7450 100644 --- a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts +++ b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts @@ -1,12 +1,54 @@ import { Component, OnInit } from '@angular/core'; +import { CityStore } from '../../data-access/city.store'; +import { + FakeHttpService, + randomCity, +} from '../../data-access/fake-http.service'; +import { City } from '../../model/city.model'; +import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-city-card', - template: 'TODO City', - imports: [], + template: ` + +
+ +
+ + `, + styles: [ + ` + .bg-light-green { + background-color: rgba(0, 250, 0, 0.1); + } + `, + ], + imports: [CardComponent], }) export class CityCardComponent implements OnInit { - constructor() {} + cities: City[] = []; + getListItemName = (city: City) => city.name; - ngOnInit(): void {} + constructor( + private http: FakeHttpService, + private store: CityStore, + ) {} + + ngOnInit(): void { + this.http.fetchCities$.subscribe((e) => this.store.addAll(e)); + this.store.cities$.subscribe((e) => (this.cities = e)); + } + + handleAddNewItemEvent() { + this.store.addOne(randomCity()); + } + + handleDeleteItemEvent(id: number) { + this.store.deleteOne(id); + } } diff --git a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts index dae48a2d5..d09181114 100644 --- a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts +++ b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { FakeHttpService } from '../../data-access/fake-http.service'; +import { + FakeHttpService, + randStudent, +} from '../../data-access/fake-http.service'; import { StudentStore } from '../../data-access/student.store'; -import { CardType } from '../../model/card.model'; import { Student } from '../../model/student.model'; import { CardComponent } from '../../ui/card/card.component'; @@ -10,12 +12,18 @@ import { CardComponent } from '../../ui/card/card.component'; template: ` + [getListItemName]="getListItemName" + class="bg-light-green" + (addNewItemEvent)="handleAddNewItemEvent()" + (deleteItemEvent)="handleDeleteItemEvent($event)"> +
+ +
+ `, styles: [ ` - ::ng-deep .bg-light-green { + .bg-light-green { background-color: rgba(0, 250, 0, 0.1); } `, @@ -24,7 +32,7 @@ import { CardComponent } from '../../ui/card/card.component'; }) export class StudentCardComponent implements OnInit { students: Student[] = []; - cardType = CardType.STUDENT; + getListItemName = (student: Student) => student.firstName; constructor( private http: FakeHttpService, @@ -36,4 +44,12 @@ export class StudentCardComponent implements OnInit { this.store.students$.subscribe((s) => (this.students = s)); } + + handleAddNewItemEvent() { + this.store.addOne(randStudent()); + } + + handleDeleteItemEvent(id: number) { + this.store.deleteOne(id); + } } diff --git a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts index 815cde9d5..e6bfcfc5c 100644 --- a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts +++ b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { FakeHttpService } from '../../data-access/fake-http.service'; +import { + FakeHttpService, + randTeacher, +} from '../../data-access/fake-http.service'; import { TeacherStore } from '../../data-access/teacher.store'; -import { CardType } from '../../model/card.model'; import { Teacher } from '../../model/teacher.model'; import { CardComponent } from '../../ui/card/card.component'; @@ -10,12 +12,18 @@ import { CardComponent } from '../../ui/card/card.component'; template: ` + [getListItemName]="getListItemName" + class="bg-light-red" + (addNewItemEvent)="handleAddNewItemEvent()" + (deleteItemEvent)="handleDeleteItemEvent($event)"> +
+ +
+ `, styles: [ ` - ::ng-deep .bg-light-red { + .bg-light-red { background-color: rgba(250, 0, 0, 0.1); } `, @@ -24,7 +32,7 @@ import { CardComponent } from '../../ui/card/card.component'; }) export class TeacherCardComponent implements OnInit { teachers: Teacher[] = []; - cardType = CardType.TEACHER; + getListItemName = (teacher: Teacher) => teacher.firstName; constructor( private http: FakeHttpService, @@ -36,4 +44,12 @@ export class TeacherCardComponent implements OnInit { this.store.teachers$.subscribe((t) => (this.teachers = t)); } + + handleAddNewItemEvent() { + this.store.addOne(randTeacher()); + } + + handleDeleteItemEvent(id: number) { + this.store.deleteOne(id); + } } diff --git a/apps/angular/1-projection/src/app/ui/card/card.component.ts b/apps/angular/1-projection/src/app/ui/card/card.component.ts index ca3c661de..3475a6ce6 100644 --- a/apps/angular/1-projection/src/app/ui/card/card.component.ts +++ b/apps/angular/1-projection/src/app/ui/card/card.component.ts @@ -1,60 +1,39 @@ -import { NgFor, NgIf } from '@angular/common'; -import { Component, Input } from '@angular/core'; -import { randStudent, randTeacher } from '../../data-access/fake-http.service'; -import { StudentStore } from '../../data-access/student.store'; -import { TeacherStore } from '../../data-access/teacher.store'; -import { CardType } from '../../model/card.model'; +import { NgFor } from '@angular/common'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; import { ListItemComponent } from '../list-item/list-item.component'; @Component({ selector: 'app-card', template: ` -
- - - -
- -
- - -
+ +
+ +
+ `, - imports: [NgIf, NgFor, ListItemComponent], + imports: [NgFor, ListItemComponent], + host: { + class: 'border-2 border-black rounded-md p-4 w-fit flex flex-col gap-3', + }, }) export class CardComponent { @Input() list: any[] | null = null; - @Input() type!: CardType; - @Input() customClass = ''; - - CardType = CardType; - - constructor( - private teacherStore: TeacherStore, - private studentStore: StudentStore, - ) {} + @Input({ required: true }) getListItemName!: (listItem: any) => string; + @Output() deleteItemEvent = new EventEmitter(); + @Output() addNewItemEvent = new EventEmitter(); addNewItem() { - if (this.type === CardType.TEACHER) { - this.teacherStore.addOne(randTeacher()); - } else if (this.type === CardType.STUDENT) { - this.studentStore.addOne(randStudent()); - } + this.addNewItemEvent.emit(); + } + handleDeleteItemEvent(id: number) { + this.deleteItemEvent.emit(id); } } diff --git a/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts b/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts index c0f9cff7f..2dbdf556a 100644 --- a/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts +++ b/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts @@ -1,7 +1,4 @@ -import { Component, Input } from '@angular/core'; -import { StudentStore } from '../../data-access/student.store'; -import { TeacherStore } from '../../data-access/teacher.store'; -import { CardType } from '../../model/card.model'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-list-item', @@ -18,18 +15,9 @@ import { CardType } from '../../model/card.model'; export class ListItemComponent { @Input() id!: number; @Input() name!: string; - @Input() type!: CardType; - - constructor( - private teacherStore: TeacherStore, - private studentStore: StudentStore, - ) {} + @Output() deleteItemEvent = new EventEmitter(); delete(id: number) { - if (this.type === CardType.TEACHER) { - this.teacherStore.deleteOne(id); - } else if (this.type === CardType.STUDENT) { - this.studentStore.deleteOne(id); - } + this.deleteItemEvent.emit(id); } } From b248e5bf01083f06ebd59f0b8dc595e10f4ef0e6 Mon Sep 17 00:00:00 2001 From: Fakhriddin Abdurakhimov Date: Sat, 18 Jan 2025 19:04:10 +0100 Subject: [PATCH 4/5] feat(Answer:1): cardListItem model --- .../component/city-card/city-card.component.ts | 17 +++++++++++------ .../student-card/student-card.component.ts | 17 +++++++++++------ .../teacher-card/teacher-card.component.ts | 17 +++++++++++------ .../1-projection/src/app/model/card.model.ts | 5 +++++ .../src/app/ui/card/card.component.ts | 6 +++--- 5 files changed, 41 insertions(+), 21 deletions(-) diff --git a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts index 3542b7450..a63a91994 100644 --- a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts +++ b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts @@ -4,15 +4,14 @@ import { FakeHttpService, randomCity, } from '../../data-access/fake-http.service'; -import { City } from '../../model/city.model'; +import { CardListItem } from '../../model/card.model'; import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-city-card', template: ` @@ -31,8 +30,7 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class CityCardComponent implements OnInit { - cities: City[] = []; - getListItemName = (city: City) => city.name; + cityListItems: CardListItem[] = []; constructor( private http: FakeHttpService, @@ -41,7 +39,14 @@ export class CityCardComponent implements OnInit { ngOnInit(): void { this.http.fetchCities$.subscribe((e) => this.store.addAll(e)); - this.store.cities$.subscribe((e) => (this.cities = e)); + this.store.cities$.subscribe((cities) => { + this.cityListItems = cities.map((city) => { + return { + name: city.name, + id: city.id, + }; + }); + }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts index d09181114..163517eb0 100644 --- a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts +++ b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts @@ -4,15 +4,14 @@ import { randStudent, } from '../../data-access/fake-http.service'; import { StudentStore } from '../../data-access/student.store'; -import { Student } from '../../model/student.model'; +import { CardListItem } from '../../model/card.model'; import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-student-card', template: ` @@ -31,8 +30,7 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class StudentCardComponent implements OnInit { - students: Student[] = []; - getListItemName = (student: Student) => student.firstName; + studentListItems: CardListItem[] = []; constructor( private http: FakeHttpService, @@ -42,7 +40,14 @@ export class StudentCardComponent implements OnInit { ngOnInit(): void { this.http.fetchStudents$.subscribe((s) => this.store.addAll(s)); - this.store.students$.subscribe((s) => (this.students = s)); + this.store.students$.subscribe((students) => { + this.studentListItems = students.map((student) => { + return { + name: student.firstName, + id: student.id, + }; + }); + }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts index e6bfcfc5c..2d653ae22 100644 --- a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts +++ b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts @@ -4,15 +4,14 @@ import { randTeacher, } from '../../data-access/fake-http.service'; import { TeacherStore } from '../../data-access/teacher.store'; -import { Teacher } from '../../model/teacher.model'; +import { CardListItem } from '../../model/card.model'; import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-teacher-card', template: ` @@ -31,8 +30,7 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class TeacherCardComponent implements OnInit { - teachers: Teacher[] = []; - getListItemName = (teacher: Teacher) => teacher.firstName; + teacherListItems: CardListItem[] = []; constructor( private http: FakeHttpService, @@ -42,7 +40,14 @@ export class TeacherCardComponent implements OnInit { ngOnInit(): void { this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t)); - this.store.teachers$.subscribe((t) => (this.teachers = t)); + this.store.teachers$.subscribe((teachers) => { + this.teacherListItems = teachers.map((teacher) => { + return { + name: teacher.firstName, + id: teacher.id, + }; + }); + }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/model/card.model.ts b/apps/angular/1-projection/src/app/model/card.model.ts index 740cd2ae4..69c0e7d17 100644 --- a/apps/angular/1-projection/src/app/model/card.model.ts +++ b/apps/angular/1-projection/src/app/model/card.model.ts @@ -3,3 +3,8 @@ export enum CardType { STUDENT, CITY, } + +export interface CardListItem { + name: string; + id: number; +} diff --git a/apps/angular/1-projection/src/app/ui/card/card.component.ts b/apps/angular/1-projection/src/app/ui/card/card.component.ts index 3475a6ce6..1dca1c178 100644 --- a/apps/angular/1-projection/src/app/ui/card/card.component.ts +++ b/apps/angular/1-projection/src/app/ui/card/card.component.ts @@ -1,5 +1,6 @@ import { NgFor } from '@angular/common'; import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { CardListItem } from '../../model/card.model'; import { ListItemComponent } from '../list-item/list-item.component'; @Component({ @@ -9,7 +10,7 @@ import { ListItemComponent } from '../list-item/list-item.component';
@@ -25,8 +26,7 @@ import { ListItemComponent } from '../list-item/list-item.component'; }, }) export class CardComponent { - @Input() list: any[] | null = null; - @Input({ required: true }) getListItemName!: (listItem: any) => string; + @Input() list: CardListItem[] | null = null; @Output() deleteItemEvent = new EventEmitter(); @Output() addNewItemEvent = new EventEmitter(); From 029b2eb3b9abe7a9a13fb3c4c8fa575068cec8ed Mon Sep 17 00:00:00 2001 From: Fakhriddin Abdurakhimov Date: Sun, 12 Oct 2025 16:12:27 +0500 Subject: [PATCH 5/5] feat(Answer:1): refactor according to comments --- .../city-card/city-card.component.ts | 25 +++++++---------- .../student-card/student-card.component.ts | 28 ++++++++----------- .../teacher-card/teacher-card.component.ts | 25 ++++++----------- .../src/app/data-access/city.store.ts | 14 ++++------ .../src/app/data-access/student.store.ts | 12 ++++---- .../src/app/data-access/teacher.store.ts | 12 ++++---- .../src/app/ui/card/card.component.ts | 22 +++++++-------- .../app/ui/list-item/list-item.component.ts | 12 ++++---- 8 files changed, 64 insertions(+), 86 deletions(-) diff --git a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts index a63a91994..45a9c5e0b 100644 --- a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts +++ b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, computed, inject } from '@angular/core'; import { CityStore } from '../../data-access/city.store'; import { FakeHttpService, @@ -11,7 +11,7 @@ import { CardComponent } from '../../ui/card/card.component'; selector: 'app-city-card', template: ` @@ -30,23 +30,18 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class CityCardComponent implements OnInit { - cityListItems: CardListItem[] = []; + private http = inject(FakeHttpService); + private store = inject(CityStore); - constructor( - private http: FakeHttpService, - private store: CityStore, - ) {} + cityListItems = computed(() => + this.store.cities().map((city) => ({ + name: city.name, + id: city.id, + })), + ); ngOnInit(): void { this.http.fetchCities$.subscribe((e) => this.store.addAll(e)); - this.store.cities$.subscribe((cities) => { - this.cityListItems = cities.map((city) => { - return { - name: city.name, - id: city.id, - }; - }); - }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts index 163517eb0..748f50587 100644 --- a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts +++ b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, computed, inject } from '@angular/core'; import { FakeHttpService, randStudent, @@ -11,7 +11,7 @@ import { CardComponent } from '../../ui/card/card.component'; selector: 'app-student-card', template: ` @@ -30,24 +30,20 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class StudentCardComponent implements OnInit { - studentListItems: CardListItem[] = []; + private http = inject(FakeHttpService); + private store = inject(StudentStore); - constructor( - private http: FakeHttpService, - private store: StudentStore, - ) {} + students = this.store.students; + + studentListItems = computed(() => + this.store.students().map((student) => ({ + name: student.firstName, + id: student.id, + })), + ); ngOnInit(): void { this.http.fetchStudents$.subscribe((s) => this.store.addAll(s)); - - this.store.students$.subscribe((students) => { - this.studentListItems = students.map((student) => { - return { - name: student.firstName, - id: student.id, - }; - }); - }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts index 2d653ae22..049137ee7 100644 --- a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts +++ b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, computed, inject } from '@angular/core'; import { FakeHttpService, randTeacher, @@ -11,7 +11,7 @@ import { CardComponent } from '../../ui/card/card.component'; selector: 'app-teacher-card', template: ` @@ -30,24 +30,17 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class TeacherCardComponent implements OnInit { - teacherListItems: CardListItem[] = []; + private http = inject(FakeHttpService); + private store = inject(TeacherStore); - constructor( - private http: FakeHttpService, - private store: TeacherStore, - ) {} + teacherListItems = computed(() => + this.store + .teachers() + .map((teacher) => ({ name: teacher.firstName, id: teacher.id })), + ); ngOnInit(): void { this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t)); - - this.store.teachers$.subscribe((teachers) => { - this.teacherListItems = teachers.map((teacher) => { - return { - name: teacher.firstName, - id: teacher.id, - }; - }); - }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/data-access/city.store.ts b/apps/angular/1-projection/src/app/data-access/city.store.ts index 711dad1d7..9fbcb346b 100644 --- a/apps/angular/1-projection/src/app/data-access/city.store.ts +++ b/apps/angular/1-projection/src/app/data-access/city.store.ts @@ -1,23 +1,21 @@ -import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; +import { Injectable, signal } from '@angular/core'; import { City } from '../model/city.model'; @Injectable({ providedIn: 'root', }) export class CityStore { - private cities = new BehaviorSubject([]); - cities$ = this.cities.asObservable(); + public cities = signal([]); addAll(cities: City[]) { - this.cities.next(cities); + this.cities.set(cities); } - addOne(student: City) { - this.cities.next([...this.cities.value, student]); + addOne(city: City) { + this.cities.set([...this.cities(), city]); } deleteOne(id: number) { - this.cities.next(this.cities.value.filter((s) => s.id !== id)); + this.cities.set(this.cities().filter((s) => s.id !== id)); } } diff --git a/apps/angular/1-projection/src/app/data-access/student.store.ts b/apps/angular/1-projection/src/app/data-access/student.store.ts index 7918118c3..6e7f57022 100644 --- a/apps/angular/1-projection/src/app/data-access/student.store.ts +++ b/apps/angular/1-projection/src/app/data-access/student.store.ts @@ -1,23 +1,21 @@ -import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; +import { Injectable, signal } from '@angular/core'; import { Student } from '../model/student.model'; @Injectable({ providedIn: 'root', }) export class StudentStore { - private students = new BehaviorSubject([]); - students$ = this.students.asObservable(); + public students = signal([]); addAll(students: Student[]) { - this.students.next(students); + this.students.set(students); } addOne(student: Student) { - this.students.next([...this.students.value, student]); + this.students.set([...this.students(), student]); } deleteOne(id: number) { - this.students.next(this.students.value.filter((s) => s.id !== id)); + this.students.set(this.students().filter((s) => s.id !== id)); } } diff --git a/apps/angular/1-projection/src/app/data-access/teacher.store.ts b/apps/angular/1-projection/src/app/data-access/teacher.store.ts index 93f68c4b1..5f6dae989 100644 --- a/apps/angular/1-projection/src/app/data-access/teacher.store.ts +++ b/apps/angular/1-projection/src/app/data-access/teacher.store.ts @@ -1,23 +1,21 @@ -import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; +import { Injectable, signal } from '@angular/core'; import { Teacher } from '../model/teacher.model'; @Injectable({ providedIn: 'root', }) export class TeacherStore { - private teachers = new BehaviorSubject([]); - teachers$ = this.teachers.asObservable(); + public teachers = signal([]); addAll(teachers: Teacher[]) { - this.teachers.next(teachers); + this.teachers.set(teachers); } addOne(teacher: Teacher) { - this.teachers.next([...this.teachers.value, teacher]); + this.teachers.set([...this.teachers(), teacher]); } deleteOne(id: number) { - this.teachers.next(this.teachers.value.filter((t) => t.id !== id)); + this.teachers.set(this.teachers().filter((t) => t.id !== id)); } } diff --git a/apps/angular/1-projection/src/app/ui/card/card.component.ts b/apps/angular/1-projection/src/app/ui/card/card.component.ts index 1dca1c178..2665e70c3 100644 --- a/apps/angular/1-projection/src/app/ui/card/card.component.ts +++ b/apps/angular/1-projection/src/app/ui/card/card.component.ts @@ -1,5 +1,4 @@ -import { NgFor } from '@angular/common'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, input, output } from '@angular/core'; import { CardListItem } from '../../model/card.model'; import { ListItemComponent } from '../list-item/list-item.component'; @@ -8,11 +7,12 @@ import { ListItemComponent } from '../list-item/list-item.component'; template: `
- + @for (item of list(); track $index) { + + }
@@ -13,9 +13,9 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; standalone: true, }) export class ListItemComponent { - @Input() id!: number; - @Input() name!: string; - @Output() deleteItemEvent = new EventEmitter(); + id = input.required(); + name = input.required(); + deleteItemEvent = output(); delete(id: number) { this.deleteItemEvent.emit(id);