Angular Topics

class
A class in Angular is a TypeScript construct used to define objects or functionality.
Example: A model class to define a user object.
typescript
Copy
Edit
export class User {
constructor(
public id: number,
public name: string,
public email: string
) {}
}

1. @Component A component is the building block of an Angular application. It defines the UI and logic for a specific view or part of a view. Example: typescript Copy Edit import { Component } from '@angular/core';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
title = 'Welcome to Flower-Mart';
}

1. @Config Not a direct Angular construct but often refers to configuration files or configuration objects. Example: An app.config.ts file to store application-wide constants. typescript Copy Edit export const AppConfig = { apiUrl: 'https://api.example.com', appName: 'Flower-Mart' }; //////////////////
2. @Directive A directive modifies the behavior or appearance of elements in the DOM. Example: A custom directive to change the background color on hover. typescript Copy Edit import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {
constructor(private el: ElementRef) {}

@hostlistener('mouseenter') onMouseEnter() {
this.el.nativeElement.style.backgroundColor = 'yellow';
}

@hostlistener('mouseleave') onMouseLeave() {
this.el.nativeElement.style.backgroundColor = null;
}
}
\\\\\\\\

1. @Enum Enums are used to define a set of named constants. Example: typescript Copy Edit export enum OrderStatus { Pending = 'Pending', Delivered = 'Delivered', Cancelled = 'Cancelled' } ////////////////////////////////////
2. env Refers to environment-specific configurations stored in environment.ts and environment.prod.ts. Example: src/environments/environment.ts typescript Copy Edit export const environment = { production: false, apiUrl: 'https://dev-api.example.com' };
3. @Guard Guards restrict or allow access to routes. Example: An authentication guard.

Edit
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}

canActivate(): boolean {
const isLoggedIn = !!localStorage.getItem('token');
if (!isLoggedIn) {
this.router.navigate(['/login']);
}
return isLoggedIn;
}
}

1. @Interceptor An interceptor modifies HTTP requests/responses. Example: Adding an authorization token to requests. typescript Copy Edit import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler) {
const token = localStorage.getItem('token');
const clonedReq = req.clone({
setHeaders: { Authorization: Bearer ${token} }
});
return next.handle(clonedReq);
}
}

/////////////

1. interface Interfaces define the shape of objects in TypeScript.

export interface Product {
id: number;
name: string;
price: number;
inStock: boolean;
}

/////////////////

1. library A reusable collection of Angular modules or components. Example: Using Angular Material as a library.

import { MatButtonModule } from '@angular/material/button';

1. @Module Modules organize and group components, directives, and services.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';

@NgModule({
declarations: [HeaderComponent],
imports: [CommonModule],
exports: [HeaderComponent]
})
export class SharedModule {}

1. @Pipe Pipes transform data in templates.

////////////////
Example: A custom pipe to capitalize text.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}

1. @Resolver Resolves data before navigating to a route.

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { ProductService } from './product.service';

@Injectable({
providedIn: 'root'
})
export class ProductResolver implements Resolve {
constructor(private productService: ProductService) {}

resolve() {
return this.productService.getAllProducts();
}
}
////////////

1. @Service-Worker Adds progressive web app (PWA) features like caching and offline capabilities. Example: Registering the service worker in app.module.ts. typescript

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
imports: [
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production
})
]
})
export class AppModule {}

/////////////////////////////

1. @Service A service provides business logic or data access. Example: typescript

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private http: HttpClient) {}

getAllProducts() {
return this.http.get('https://api.example.com/products');
}
}