Angular πŸ‡ΊπŸ‡¦ - practical notes
1.63K subscribers
1.6K photos
1 file
532 links
Angular - practical notes

This group is for posting practical notes for Angular developers. Mostly all posts are for quick implementation https://t.me/angular_practical_notes (Commenting on posts only in ENG and UA langs here). Welcome!
Download Telegram
πŸ€“ Code Review Checklist: Magic Values πŸ“› πŸ’£

#angular #review

It is recommended to use constants or enums to make the code more readable and maintainable and avoid magic values
πŸ”₯1
πŸ€“ Code Review Checklist: Consider Extracting logic to Services πŸ“›

#angular #review

If we find out that part of the component logic can be reused in many places, we can optimize that by extracting this logic into services for better code organization and reusability
πŸ€“ Code Review Checklist: Hard-Coded Styles πŸ“›

#angular #review

Be careful when using inline styles like style="margin-top: 12px".it can be hard to maintain
πŸ“„ Change Detection in Angular

#angular #signals #cdr

4. Local Change Detection 🚩Angular 17

@Component({
selector: 'app-timer',
template: `<span>Last Updated: {{ lastUpdateInSeconds() | number:'1.0-0' }} Seconds</span> {{ logCd() }}`,
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [DatePipe, DecimalPipe, AsyncPipe]
})
export class TimerComponent {
@Input() lastUpdate = new Date();
lastUpdateInSeconds = signal(0)
constructor() {
setInterval(() => {
this.lastUpdateInSeconds.set((new Date().getTime() - this.lastUpdate.getTime()) / 1_000);
}, 1000);
}

logCd() {
console.log('log from timer');
}
}



βœ… Article link: https://medium.com/ngconf/local-change-detection-in-angular-410d82b38664
πŸ”₯1πŸ₯°1
πŸ“„ Transitioning to Angular 17’s New Control Flow Syntax

#angular #controlFlow

🚩 > Angular v17

βœ… Article link: https://medium.com/@dimeloper/transitioning-to-angular-17s-new-control-flow-syntax-0555aa45f06f
πŸ”₯1
πŸ“„ Exploring the New Object.groupBy Function in Chrome 117

#js #groupBy

βœ… Article link: https://medium.com/@bhargavr445/exploring-the-new-object-groupby-function-in-chrome-117-028820848433
πŸ”₯1
πŸ“„ Card Composite via @ViewChildren in Angular

#angular #decorator #ViewChildren

Imagine the following requirements for your Angular app:

- Your customer wants a view that displays multiple cards at once.
- A button at the top of the page should toggle the edit mode.
- While in edit mode, all cards are editable at the same time.
- As soon as you click β€œsave” only those cards that actually have been edited are going to send a request to the server.
- If you decide to discard the changes by clicking on β€œcancel” all cards should be reset to their initial state.

This is a common scenario in any more sophisticated web application. Nevertheless, I just recently discovered a very handy way to handle those requirements in Angular. In this article I want to share my solution, leveraging the
@ViewChildren property decorator to implement the Card Composite pattern.


βœ… Article link: https://blog.stackademic.com/card-composite-via-viewchildren-in-angular-aa3317f92f82
πŸ‘2πŸ”₯1
πŸ“„ Angular Interceptors: Authentication Interceptor

#angular #interceptor

An authentication interceptor is used to add authentication tokens to outgoing requests and handle authentication-related errors. This is essential for securing your application’s API requests.


import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
} from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler) {
const authToken = 'your-auth-token';
const authRequest = request.clone({
headers: request.headers.set('Authorization', `Bearer ${authToken}`),
});
return next.handle(authRequest);
}
}
πŸ”₯2
πŸ“„ Angular Interceptors: Error Handling Interceptor

#angular #interceptor

An error handling interceptor can be used to centralize error handling for HTTP requests. It can capture HTTP errors, log them, and perform appropriate actions like displaying error messages.


import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpErrorResponse,
} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler) {
return next.handle(request).pipe(
catchError((error: HttpErrorResponse) => {
// Handle and log the error here
console.error('HTTP Error:', error);
// Optionally rethrow the error to propagate it
return throwError(error);
})
);
}
}
πŸ”₯2