In Angular, an interceptor is a service that intercepts HTTP requests or responses before they reach the server or the component. Interceptors are part of Angular's HttpClient module and are commonly used for: Adding headers (e.g., authentication tokens) Logging requests/responses Handling errors globally Modifying requests or responses How Interceptors Work When you make an…
In Angular, the HttpClient module is a built-in service that allows your application to communicate with backend services over HTTP. It is part of the @angular/common/http package and is the modern, recommended way to make HTTP requests in Angular. Here’s a detailed breakdown: 1. Purpose HttpClient is used to: Fetch data from a server…
In Angular, the RouterModule is a core module that provides navigation and routing capabilities for single-page applications (SPAs). It allows you to define routes, navigate between different components, and handle parameters, guards, lazy loading, and more. Let’s break it down step by step. 1. Importing RouterModule You need to import RouterModule in your application’s…
In Angular, Route Guards are used to control access to routes. They act like gatekeepers—allowing or preventing navigation to a route based on some logic, such as authentication, role permissions, or unsaved changes. Angular provides five types of route guards. Let’s go through them step by step. 1. Types of Route Guards GuardWhen It…
In Angular, lifecycle hooks are special methods that allow you to tap into key moments of a component or directive’s life — from creation to destruction. These hooks let you execute custom logic at specific points in the component’s life cycle. Angular provides several built-in hooks. Here’s a structured breakdown: 1. ngOnChanges Called: Whenever…
Prettier is an opinionated code formatter. It automatically formats your code so that it follows consistent style rules. It supports many programming languages, including: JavaScript / TypeScript HTML / CSS / SCSS JSON / YAML / Markdown Python (via plugins) And more It does not check for errors or bugs—it just makes your code…
ESLint is a static code analysis tool for JavaScript (and related languages like TypeScript) that helps you find and fix problems in your code. Essentially, it enforces coding standards and best practices so your code is cleaner, more consistent, and less prone to bugs. Here’s a breakdown: Linting: ESLint analyzes your code without running…
1. Angular Templates An Angular template is the HTML view that defines how the UI looks. It can include: Standard HTML elements Angular-specific syntax (directives, bindings, pipes) Example of a simple template: <h1>Welcome, {{ userName }}!</h1> <p>{{ message }}</p> <button (click)="updateMessage()">Click me</button> <h1>Welcome, {{ userName }}!</h1> <p>{{ message }}</p> <button (click)="updateMessage()">Click me</button> Here: {{…
1. Services in Angular Definition:A service is a class in Angular that contains logic, data, or functionality that can be shared across multiple components. Services are used to separate concerns, meaning components handle the view, while services handle business logic or data fetching. Common uses of services: Fetching data from APIs (HTTP requests) Storing…
1. What is a Pipe? A pipe takes in data as input and transforms it into a desired output for display in the template. It's similar to a filter in other frameworks. Example: <p>{{ birthday | date:'longDate' }}</p> <p>{{ birthday | date:'longDate' }}</p> Here, the date pipe transforms a Date object into a readable…