Angular Training App - Pavel Trifonov #6
Conversation
- Changed app title from 'angular-template' to 'Training Angular Project'. - Introduced Post model interface for better type management. - Enhanced posts-list component to display posts with detailed information. - Created posts-page component to manage posts loading and error handling. - Implemented NgRx state management for posts, including actions, effects, reducers, and selectors. - Added PostsService for API interactions with JSONPlaceholder. - Set up environment configuration for API URL. - Updated main.ts to include NgRx store and effects providers.
…ests for PostsService
- Integrated Angular Material components including MatToolbar, MatCard, and MatButton. - Updated app.component.html to include a navigation toolbar. - Refactored posts-list.component.html to use MatCard for displaying posts. - Enhanced styles in app.component.scss and posts-list.component.scss for better layout. - Updated package.json and package-lock.json to include Angular Material and CDK dependencies.
…gement for comments
… enhance post and comment layouts
…ment; improve error handling and loading states in templates
… GuestbookPage components with templates and tests
…nd improve styling
…dapter, update selectors, and enhance effects for loading comments and posts
…y; update imports and usages across the application
…service; update components and templates for guestbook entries display
…cture guestbook entry handling
| <mat-form-field appearance="fill"> | ||
| <mat-label>Name</mat-label> | ||
| <input matInput formControlName="name" required> | ||
| <mat-error *ngIf="guestBookForm.get('name')?.hasError('required')"> |
There was a problem hiding this comment.
In modern angular you can inprove readability by using new @if / @for syntax -> https://angular.dev/essentials/templates#control-flow-with-if-and-for
in that case ngIf or Common module import is not needed as well.
| @@ -1 +1,5 @@ | |||
| /* You can add global styles to this file, and also import other style files */ | |||
| @import "@angular/material/prebuilt-themes/indigo-pink.css"; | |||
There was a problem hiding this comment.
This most probably works, but should be deprecated. In Angular 19 syntax was changecd to @use. No need to change, just FYI.
|
|
||
| constructor( | ||
| private guestPostEntryForm: FormBuilder, | ||
| private guestBookEntryDialogRef: MatDialogRef<GuestbookEditComponent>, |
There was a problem hiding this comment.
In new Angular services can be injected like
private guestPostEntryForm = inject(FormBuilder)
Here is nice article on diference of approaches -> https://alyshovtapdig.medium.com/inject-vs-constructor-in-angular-which-one-should-you-use-en-dbdf1070739c
| { id: 1, postId: 1, body: 'Test comment' } as Comment | ||
| ]; | ||
|
|
||
| service.getByPost(post).subscribe(comments => { |
There was a problem hiding this comment.
don't forget to unsubscribe from your "long-lived" subscriptions, otherwise you'll get nasty memory leaks
| RouterLink, | ||
| MatCardModule, | ||
| MatButtonModule, | ||
| MatToolbarModule |
There was a problem hiding this comment.
You should only import specific components\directives\pipes rather than whole module. It will be better "tree-shaked" during build time which will save you some bytes on final build.
| styleUrl: './posts-list.component.scss' | ||
| }) | ||
| export class PostsListComponent { | ||
| @Input() posts: Post[] | null = []; |
There was a problem hiding this comment.
you can use a new input syntax as well, it will use signals and better integrate with overall signals approach
No description provided.