Basically, in this Blog, we will discuss about the lazy-loading of multiple pop-up websites like Instagram.


Angular fully supports the concept of auxiliary routes, Which allows you to create multiple routes on the same page in a single page application. Each component has a primary route and zero or multiple auxiliary outlets. And the unique name (<router-outlet name=”unique-name”>) is required in auxiliary outlets.

The first thing we have to keep in mind is that we have to do the configuration of simple routing. In which Auxiliary Routeing will be displayed. | Once the router has a URL match, it…

Especially when we take pictures from a DSLR camera 📷, then this problem is seen. If we see the picture taken from the DSLR camera 📷 on our website then its behavior changes and if we see that image in our system or mobile gallery 📱 then its behavior will be seen correctly. Let’s start with why this happens?

Looking at the image, it opens fine in the browser and using Picture Viewer of Windows as well as in Preview of Mac very much normal. Then something crazy happened. In Chrome, when I tried to include it using the <img…

Multiple time dom manipulating has become a discussion issue in single-page applications. how to stop multiple times dom manipulating?. how to improve my website performance?. how to ? how to ? how to ? how to …………

So we can improve to a great extent with trackby features.

The trackby feature of Angular is a very important feature.
A trackby Angular runs itself which is inbuilt in it. we can override it.
The trackby index is different and trackby unique identification (like id) is different. Both behave differently in the DOM.


After uploading the video. then make blob URL and set HTML video player.

RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams.

Now start code

* @function toggleRecord
* check recording base on `recordingTimer`
* getting permission on `mediaDevices` audio
toggleRecord() {
if (this.recordingTimer) {
} else {
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
}).catch(error => {
* @param stream
* @name recordWebRTC set recording `stream` and `options`
* @var blobUrl set null UI update
* @see startCountdown()
startRTC(stream: any) {
this.recordWebRTC = new RecordRTC.StereoAudioRecorder(stream, this.options);
this.mediaRecordStream = stream;
this.blobUrl = null;

The auth guard has a major contribution to angular lazy loading modules. By the way, angular has many types of guard like (CanActivate, CanActivateChild, canDeactivate, CanLoad). But we will talk about canActivate and canLoad guard.

If a route has to be opened at the base of a condition, then it is possible for the guard.

Short and full information

CanActivate: This protects the route, but does not prevent that module from loading.

canActivate(): Promise<boolean | UrlTree> {
if (localStorage.getItem("token")) {
const tree:UrlTree=this.router.parseUrl('/');
return tree;
} else {
return true;

CanLoad: This protects the route completely. Such as…

ng g p translate

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

import { TranslateService } from ‘../../services/translate/translate.service’;


name: ‘translate’,

pure: false


export class TranslatePipe implements PipeTransform {

constructor(private translate: TranslateService) { }

transform(key: any): any {

return[key] || key;



Pradeep Singh Rawat

I’m a Front-End Engineer and Blogger, open-source maintainer ✍️. Make some magic. #Js, #Angular

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store