Rehmaanali

Add AuthInterceptor that will intercept all your HTTP requests and add the token to its headers: import { Injectable } from ‘@angular/core’; import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from ‘@angular/common/http’; import { Observable } from ‘rxjs’; @Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token = localStorage.token; // […]

Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution. Let’s demonstrate the multi-casting feature, var source = Rx.Observable.from([1, 2, 3]); var subject = new Rx.Subject(); var multicasted = source.multicast(subject); // These are, under the hood, `subject.subscribe({…})`: multicasted.subscribe({ next: (v) => console.log(‘observerA: ‘ + v) }); multicasted.subscribe({ next: (v) […]

You can handle the DOM element via ElementRef by injecting it into your component’s constructor:   constructor(myElement: ElementRef) { … }

Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory I am getting this below error although I have a total of 4000 Unit Test Cases (test suits) and my test command is ng test –codeCoverage=true –progress=true –source-map=true   ERROR <— Last few GCs —> [17161:0x3436ed0] 77543 ms: Mark-sweep 1339.8 (1441.9) -> […]

Github first introduced the npm v7 last in May. Today, GitHub has announced the release of npm v7.0.0, which will be shipping with Node.js 15.0.0 next week. NPM CLI v7.0.0 you can install it today by running npm i -g [email protected] in your terminal. Features in New NPM CLI npm 7 comes with some long-awaited […]

If the URL doesn’t match any predefined routes then it causes the router to throw an error and crash the app. In this case, you can use a wildcard route. A wildcard route has a path consisting of two asterisks to match every URL. For example, you can define PageNotFoundComponent for wildcard route as below: […]

I am using the angular 10 version I have an issue with the routerLinkActive it is setting the home URL (base URL) to active even if the route is on another page. <li class=”nav-item”> <a class=”nav-link” [routerLink]='[“”]’ routerLinkActive=’active’>Home</a> </li> <li class=”nav-item”> <a class=”nav-link” [routerLink]='[“/contact-us”]’ routerLinkActive=’active’>Contact Us</a> </li>

Annotations In Angular, annotations are used for creating an annotation array. They are only metadata sets of the class using the Reflect Metadata library. Decorators In Angular Decorators are design patterns used for separating decoration or modification of some class without changing the source code.

ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation: 1) Emulated – Styles used in other HTML spread to the component 2) Native – Styles used in other HTML doesn’t spread to the component 3) None – Styles defined in a […]

I have multiple methods that contain individual get method but in component How to Call Multiple Rest API and Subscribe in component i.e. calling multiple methods in one subscribe. /** * Get current User from the server. * * @returns {json} current user. */ public getCurrentUser(): any { return this.http.get(this.baseUrl) .pipe(map((res: any) => res.data)); } […]