DEV Community: MD ASHRAF

Garbage Collection: Young Vs Old generation

MD ASHRAF — Wed, 26 Nov 2025 20:30:52 +0000

Garbage collection?? Huhh it is just a small topic. wait what???? 😮😮

Then what are these terms

Young Generation, Old Generatio, Eden, Mark and sweep etc.

1. The Beginning: Empty Memory
Initially, our program's memory (the heap) is empty. We divide it into two main sections:

Young Generation (Green): Where new objects are born. It's often smaller because most objects die quickly.

Old Generation (Blue): Where objects that have proven to live a long time go. This area is typically larger.

Young generation structure:

Eden Space: Where all new objects initially go.

Survivor Space 1 (S1): Objects surviving an Eden collection are moved here.

Survivor Space 2 (S2): Objects are moved between S1 and S2 in subsequent collections.

Collection Type: The GC event that collects this area is called a Minor GC.

Process:

When Eden fills up, a Minor GC is triggered.

Objects that are still reachable (in use) in Eden and the active Survivor space are copied to the other Survivor space.

Objects that have survived a certain number of Minor GCs (known as the age threshold or tenuring threshold) are promoted (moved) to the Old Generation.

The Eden and the initially active Survivor space are then completely cleared, making the process very fast.

Old Generation (Tenured)
This area holds objects that have survived many Minor GCs in the Young Generation and have been promoted (or tenured). These are the long-lived objects.

Collection Type: The GC event that collects this area is called a Major GC (or part of a Full GC, which usually collects the entire heap, including the Young Generation).

Frequency: It is collected much less frequently than the Young Generation because the objects here are more likely to still be in use.

Algorithm: Major GC often uses algorithms optimized for reclaiming memory with a lower proportion of dead objects, such as** Mark-Sweep-Compact** (or variations like Concurrent Mark-Sweep or Garbage-First). These algorithms are generally slower but more thorough, as running them frequently would defeat the purpose of the generational model.

🔄 Promotion/Tenuring

Promotion is the process where a long-lived object is moved from the Young Generation to the Old Generation.

Each time an object survives a Minor GC, its "age" counter is incremented.

Once the object's age reaches a specific tenuring threshold (which can be configured, often between 1 and 15), it is promoted to the Old Generation during the next Minor GC.

This generational approach significantly improves GC performance by:

Reducing overhead: Applying a fast, copy-based algorithm (like Copying Collector) frequently to the small Young Generation (where most garbage is created).

Infrequently accessing the large Old Generation: Only running the slower, more complex collection algorithms when necessary for the Old Generation.

Summary Analogy

Think of it like a post office sorting room:

Follow our more interview playlists here: 📌📌📌

Java Interview series
Html & CSS Interview series
Javascript Interview series
Angular Interview series

The Diamond Problem in JAVA 💎 💎 💎 💎 💎 💎 💎

MD ASHRAF — Fri, 21 Nov 2025 11:33:36 +0000

The Diamond Problem is an ambiguity issue in multiple inheritance where a class inherits the same method from two or more parent classes. Java prevents this with classes, but it can arise with interfaces (since Java 8) if a class implements two interfaces that provide a default method with the same signature.

Code example:

// Interface 1
interface InterfaceA {
    default void sameMethod() {
        // some functionality
        System.out.println("Implementation from Interface A");
    }
}

// Interface 2
interface InterfaceB {
    default void sameMethod() {
        // some functionality
        System.out.println("Implementation from Interface B");
    }
}

// Class D implements both interfaces, causing the Diamond Problem
// This code will result in a **COMPILATION ERROR

class ClassD implements InterfaceA, InterfaceB {
    // Compile-time error:
    // 'ClassD inherits unrelated defaults for sameMethod() from types InterfaceA and InterfaceB'
}

✅ The Solution (After Resolution)

Java resolves the Diamond Problem by forcing the implementing class to provide its own version of the ambiguous method. This is Java's rule for default method ambiguity: when there's a conflict, the implementing class must override the method.

Code example:

// Interface 1 (Same as before)
interface InterfaceA {
    default void sameMethod() {
        System.out.println("Implementation from Interface A");
    }
}

// Interface 2 (Same as before)
interface InterfaceB {
    default void sameMethod() {
        System.out.println("Implementation from Interface B");
    }
}

// Class D resolves the Diamond Problem by providing its own implementation
class ClassD implements InterfaceA, InterfaceB {

    // Must override the ambiguous method
    @Override
    public void sameMethod() {
        // Option 1: Provide a brand new implementation
        System.out.println("Implementation from Class D (Resolving conflict)");
    }
}

public class DiamondProblemDemo {
    public static void main(String[] args) {
        ClassD obj = new ClassD();
        obj.sameMethod(); // Output: Implementation from Class D (Resolving conflict)
    }
}

Here child class have provided its own implementation, but suppose sometimes we want to use the implementation already defined in one of the interface above then we can bring that implememntation inside child class **overridden method **using

// Option 2 (Advanced): Call a specific interface's default method // **InterfaceA.super.sameMethod()**;

Code example:

// Class D resolves the Diamond Problem by providing its own implementation
class ClassD implements InterfaceA, InterfaceB {

    // Must override the ambiguous method
    @Override
    public void sameMethod() {
        // Option 1: Provide a brand new implementation
        System.out.println("Implementation from Class D (Resolving conflict)");

        // Option 2 (Advanced): Call a specific interface's default method
        // InterfaceA.super.sameMethod();
    }
}

Lets explore more deeper

If InterfaceA extends two other interfaces (InterfaceX and InterfaceY), and both InterfaceX and InterfaceY have a default method with the same signature, the ambiguity is solved at which level?

Answer: At the level of InterfaceA itself.

The rule is: A class or interface always wins over a default method from a super-interface.

Code Example problem:

interface InterfaceX {
    default void sameMethod() {
        System.out.println("From X");
    }
}

interface InterfaceY {
    default void sameMethod() {
        System.out.println("From Y");
    }
}

// THIS WILL RESULT IN A COMPILATION ERROR!
// Interface A inherits unrelated defaults for sameMethod() from types InterfaceX and InterfaceY.
// It must explicitly override sameMethod().
interface InterfaceA extends InterfaceX, InterfaceY {
    // Error occurs here because Java doesn't know whether A should use X's or Y's version.
}

class ClassD implements InterfaceA {
    // This class won't even compile because InterfaceA has an error.
}

✅ Resolution (Required Override in InterfaceA)

To fix this, InterfaceA must provide an implementation for sameMethod(). It can use one of the parent implementations or define a new one.

interface InterfaceX {
    default void sameMethod() {
        System.out.println("From X");
    }
}

interface InterfaceY {
    default void sameMethod() {
        System.out.println("From Y");
    }
}

// RESOLUTION: InterfaceA provides an override.
interface InterfaceA extends InterfaceX, InterfaceY {
    @Override
    default void sameMethod() {
        // InterfaceA chooses which method to use, or provides its own.
        // Here, it chooses to call the implementation from InterfaceX.
        InterfaceX.super.sameMethod();
        System.out.println("...via A's resolution.");

        // 2. Explicitly call Interface Y's implementation
        InterfaceY.super.sameMethod();
    }
}

// Class D can now implement InterfaceA without error
class ClassD implements InterfaceA {
    // Class D doesn't need to do anything, as InterfaceA has already provided the concrete method.
}

public class DiamondProblemDeepDive {
    public static void main(String[] args) {
        ClassD obj = new ClassD();
        obj.sameMethod();
    }
}

🧠Summary of Hierarchy Rules

Class always wins: A method defined in a class (like ClassD) is always chosen over a default method in any interface.

Sub-interface wins over super-interface: A default method in a sub-interface (like InterfaceA overriding the method) is always chosen over a default method in a super-interface (InterfaceX or InterfaceY).

Conflict = Mandatory Override: If an interface or class inherits two or more conflicting default methods from its immediate parents, it must provide an explicit override (either by defining a new body or by using the InterfaceName.super.methodName() syntax).

Thank you, PLease Subscribe like and bookmark our more series here .

HTML & CSS Series
Javascript Series
Angular Series

Switch images in desktop and mobile views using CSS: Media queries

MD ASHRAF — Sat, 12 Jul 2025 02:30:00 +0000

To switch images in desktop and mobile view using CSS media queries, you can use the following approach:

HTML:

<img src="desktop-image.jpg" class="desktop-image" alt="Desktop Image">
<img src="mobile-image.jpg" class="mobile-image" alt="Mobile Image">

CSS:

.mobile-image {
  display: none;
}

@media only screen and (max-width: 768px) {
  .desktop-image {
    display: none;
  }
  .mobile-image {
    display: block;
  }
}

In this example, the .desktop-image is displayed by default, and the .mobile-image is hidden. When the screen width is 768px or less ( typical mobile screen width), the .desktop-image is hidden, and the .mobile-image is displayed.

Alternatively, you can use the picture element and srcset attribute to achieve the same result:

<picture>
  <source srcset="mobile-image.jpg" media="(max-width: 768px)">
  <img src="desktop-image.jpg" alt="Desktop Image">
</picture>

This approach allows the browser to choose the correct image based on the screen width, without needing to use CSS media queries.

You can also use CSS background images and media queries to achieve the same result:

.image-container {
  background-image: url('desktop-image.jpg');
}

@media only screen and (max-width: 768px) {
  .image-container {
    background-image: url('mobile-image.jpg');
  }
}

Note that the image container element should have a fixed height and width for this approach to work.

Unit test CHILD component from PARENT component's test case

MD ASHRAF — Fri, 11 Jul 2025 08:58:50 +0000

Here are some ways to get a child component in a parent test case in Angular:

Using fixture.debugElement.query():

const childDebugElement = fixture.debugElement.query(By.directive(ChildComponent));
const childComponent = childDebugElement.componentInstance;

This method uses the debugElement property of the fixture to query for the child component.

2.Using fixture.debugElement.queryAll():

const childDebugElements = fixture.debugElement.queryAll(By.directive(ChildComponent));
const childComponents = childDebugElements.map(de => de.componentInstance);

This method uses the queryAll method to retrieve an array of debug elements that match the child component directive.

3.Using fixture.nativeElement.querySelector():

const childElement = fixture.nativeElement.querySelector('app-child');
const childComponent = fixture.debugElement.query(By.css('app-child')).componentInstance;

This method uses the nativeElement property of the fixture to query for the child component element, and then uses the debugElement property to retrieve the component instance.

4.Using a test double or spy:

const childComponentSpy = jasmine.createSpyObj('ChildComponent', ['methodName']);
TestBed.configureTestingModule({
  declarations: [ParentComponent],
  providers: [{ provide: ChildComponent, useValue: childComponentSpy }]
});

This method creates a test double or spy for the child component, allowing you to test the parent component's interactions with the child component without actually rendering the child component.

5.Using ViewChild:
// parent.component.ts

@ViewChild(ChildComponent) childComponent: ChildComponent;

// parent.component.spec.ts

const childComponent = fixture.componentInstance.childComponent;

This method uses the ViewChild decorator to retrieve a reference to the child component instance in the parent component.

These are just a few examples of how you can get a child component in a parent test case in Angular. The best approach will depend on your specific testing needs and requirements.

Set css style using html data attribute

MD ASHRAF — Fri, 04 Jul 2025 14:30:00 +0000

Using attr() function

Here's the syntax:

element {
  property: attr(data-attribute-name);
}

For example, if you have an HTML element like this:

<div data-color="#ff0000"></div>

You can access the data-color attribute in CSS like this:

div {
  background-color: attr(data-color);
}

However, this will only work for certain properties like content, and not for properties like background-color.

If you want to use the data attribute value for styling purposes, you can use this way:

Solution 1:

style.css

a{
  background-color: attr(data-bg-color type(<color>)); /*add type(<color>) as it is, to tell browser that type of value is a type of color*/
  font-size: attr(data-font-size px)}
}

.html

<a href="https://www.w3schools.com" data-font-size="30" data-bg-color="#ff0000">Visit W3Schools</a>

Solution 2:

You can also use CSS custom properties (variables) to achieve this. For example:

<div style="--color: #ff0000;"></div>

div {
  background-color: var(--color);
}

This way, you can dynamically set the value of the --color property and it will be used in the CSS.

Note: that the attr() function is not widely supported for all properties, and it's mainly used for the content property. For other properties, you may need to use other approaches like attribute selectors or custom.

Array Mutating & Non-Mutating Methods

MD ASHRAF — Thu, 03 Jul 2025 14:30:00 +0000

Lets first see the list of function categorised as Mutating Methods & Non-Mutating Methods below, will then share example of each function:

+-----------------------+---------------------------+
| Mutating Methods      | Non-Mutating Methods      |
+-----------------------+---------------------------+
| push()                | concat()                  |
| pop()                 | slice()                   |
| shift()               | map()                     |
| unshift()             | filter()                  |
| splice()              | reduce()                  |
| sort()                | reduceRight()             |
| reverse()             | forEach()                 |
| fill()                | every()                   |
| copyWithin()          | some()                    |
|                       | find()                    |
|                       | findIndex()               |
|                       | findLast() (ES2023)       |
|                       | findLastIndex() (ES2023)  |
|                       | includes()                |
|                       | indexOf()                 |
|                       | lastIndexOf()             |
|                       | join()                    |
|                       | toString()                |
|                       | toLocaleString()          |
|                       | flat()                    |
|                       | flatMap()                 |
|                       | at() (ES2022)             |
|                       | toReversed() (ES2023)     |
|                       | toSorted() (ES2023)       |
|                       | toSpliced() (ES2023)      |
|                       | with() (ES2023)           |
|                       | Array.from()              |
|                       | Array.isArray()           |
|                       | Array.of()                |
|                       | Object.groupBy() (ES2024) |
|                       | Map.groupBy() (ES2024)    |
+-----------------------+---------------------------+

Array Methods that Mutate the Original Array:

push(): Adds one or more elements to the end of an array and returns the new length of the array.

let arr = [1, 2, 3];
arr.push(4); // arr is now [1, 2, 3, 4]

pop(): Removes the last element from an array and returns that element.

let arr = [1, 2, 3];
let removed = arr.pop(); // removed is 3, arr is now [1, 2]

shift(): Removes the first element from an array and returns that element.

let arr = [1, 2, 3];
let removed = arr.shift(); // removed is 1, arr is now [2, 3]

unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

let arr = [1, 2, 3];
arr.unshift(0); // arr is now [0, 1, 2, 3]

splice(): Adds, removes, or replaces elements in an array at a specified index, and returns an array containing the deleted elements.

let arr = [1, 2, 3, 4, 5];
let removed = arr.splice(2, 1, 6, 7); // removed is [3], arr is now [1, 2, 6, 7, 4, 5]

sort(): Sorts the elements of an array in place and returns the reference to the same array, now sorted.

let arr = [3, 1, 4, 1, 5];
arr.sort(); // arr is now [1, 1, 3, 4, 5] (default string sort, or with a compare function)

reverse(): Reverses the order of the elements in an array in place and returns the reference to the same array.

let arr = [1, 2, 3];
arr.reverse(); // arr is now [3, 2, 1]

fill(): Fills all the elements of an array from a start index to an end index with a static value.

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 2, 4); // arr is now [1, 2, 0, 0, 5]

copyWithin(): Copies part of an array to another location in the same array and returns the modified array.

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // arr is now [4, 5, 3, 4, 5]

Array Methods that Do Not Mutate the Original Array

These methods return a new array or a new value, leaving the original array unchanged.

concat(): Joins two or more arrays and returns a new array.


let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // newArr is [1, 2, 3, 4], arr1 and arr2 are unchanged

slice(): Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4); // newArr is [2, 3, 4], arr is unchanged

map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2); // newArr is [2, 4, 6], arr is unchanged

filter(): Creates a new array with all elements that pass the test implemented by the provided function.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(x => x % 2 === 0); // newArr is [2, 4], arr is unchanged

reduce(): Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

let arr = [1, 2, 3];
let sum = arr.reduce((acc, current) => acc + current, 0); // sum is 6, arr is unchanged

reduceRight(): Similar to reduce(), but executes the reducer function from right to left.

let arr = [1, 2, 3];
let sum = arr.reduceRight((acc, current) => acc + current, 0); // sum is 6, arr is unchanged

forEach(): Executes a provided function once for each array element. (Returns undefined, does not create a new array).

let arr = [1, 2, 3];
arr.forEach(x => console.log(x)); // arr is unchanged

every(): Tests whether all elements in the array pass the test implemented by the provided function. Returns a Boolean value.

let arr = [1, 2, 3];
let allEven = arr.every(x => x % 2 === 0); // allEven is false, arr is unchanged

some(): Tests whether at least one element in the array passes the test implemented by the provided function. Returns a Boolean value.

let arr = [1, 2, 3];
let hasEven = arr.some(x => x % 2 === 0); // hasEven is true, arr is unchanged

find(): Returns the value of the first element in the provided array that satisfies the provided testing function. Otherwise, undefined is returned.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3); // found is 4, arr is unchanged

findIndex(): Returns the index of the first element in the array that satisfies the provided testing function. Otherwise, -1 is returned.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3); // index is 3, arr is unchanged

findLast() (ES2023): Returns the value of the last element in the array that satisfies the provided testing function. Otherwise, undefined is returned.

let arr = [1, 2, 3, 4, 3];
let found = arr.findLast(x => x === 3); // found is 3, arr is unchanged

findLastIndex() (ES2023): Returns the index of the last element in the array that satisfies the provided testing function. Otherwise, -1 is returned.

let arr = [1, 2, 3, 4, 3];
let index = arr.findLastIndex(x => x === 3); // index is 4, arr is unchanged

includes(): Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

let arr = [1, 2, 3];
let hasTwo = arr.includes(2); // hasTwo is true, arr is unchanged

indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let arr = [1, 2, 3];
let index = arr.indexOf(2); // index is 1, arr is unchanged

lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.

let arr = [1, 2, 3, 2];
let index = arr.lastIndexOf(2); // index is 3, arr is unchanged

join(): Creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.

let arr = [1, 2, 3];
let str = arr.join('-'); // str is "1-2-3", arr is unchanged

toString(): Returns a string representing the specified array and its elements.

let arr = [1, 2, 3];
let str = arr.toString(); // str is "1,2,3", arr is unchanged

toLocaleString(): Returns a string representing the elements of the array. The elements are converted to strings using their toLocaleString methods.

let arr = [1000, 200];
let str = arr.toLocaleString('en-US'); // str is "1,000,200", arr is unchanged

flat(): Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

let arr = [1, [2, 3], [4, [5]]];
let newArr = arr.flat(2); // newArr is [1, 2, 3, 4, 5], arr is unchanged

flatMap(): Returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level.

let arr = [1, 2, 3];
let newArr = arr.flatMap(x => [x, x * 2]); // newArr is [1, 2, 2, 4, 3, 6], arr is unchanged

at() (ES2022): Takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

let arr = [1, 2, 3];
let element = arr.at(-1); // element is 3, arr is unchanged

toReversed() (ES2023): Returns a new array with the elements in reversed order. This is the non-mutating counterpart of reverse().

let arr = [1, 2, 3];
let newArr = arr.toReversed(); // newArr is [3, 2, 1], arr is unchanged

toSorted() (ES2023): Returns a new array with the elements sorted in ascending order. This is the non-mutating counterpart of sort().

let arr = [3, 1, 4, 1, 5];
let newArr = arr.toSorted(); // newArr is [1, 1, 3, 4, 5], arr is unchanged

toSpliced() (ES2023): Returns a new array with some elements removed and/or replaced at a given index. This is the non-mutating counterpart of splice().

let arr = [1, 2, 3, 4, 5];
let newArr = arr.toSpliced(2, 1, 6, 7); // newArr is [1, 2, 6, 7, 4, 5], arr is unchanged

with() (ES2023): Returns a new array with the element at the given index replaced with the given value.

let arr = [1, 2, 3];
let newArr = arr.with(1, 99); // newArr is [1, 99, 3], arr is unchanged

Array.from(): Creates a new, shallow-copied Array instance from an array-like or iterable object.

let str = "abc";
let arr = Array.from(str); // arr is ['a', 'b', 'c']

Array.isArray(): Determines whether the passed value is an Array.

Array.isArray([1, 2, 3]); // true

Array.of(): Creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.

Array.of(1, 2, 3); // [1, 2, 3]

Object.groupBy() (ES2024): This is a static method that groups the elements of an iterable according to the string values returned by a provided callback function. It returns an object with the groups.

const array = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 30 }];
const groupedByAge = Object.groupBy(array, ({ age }) => age);
// groupedByAge will be:
// {
//   '30': [{ name: 'Alice', age: 30 }, { name: 'Charlie', age: 30 }],
//   '25': [{ name: 'Bob', age: 25 }]
// }
// The original array is not mutated.

Map.groupBy() (ES2024): Similar to Object.groupBy(), but returns a Map instance instead of an object. This is useful when the keys for grouping might not be valid object keys (e.g., symbols, or numbers that you want to keep as numbers).

const array = [{ type: 'fruit', name: 'apple' }, { type: 'vegetable', name: 'carrot' }, { type: 'fruit', name: 'banana' }];
const groupedByType = Map.groupBy(array, ({ type }) => type);
// groupedByType will be a Map:
// Map {
//   'fruit' => [{ type: 'fruit', name: 'apple' }, { type: 'fruit', name: 'banana' }],
//   'vegetable' => [{ type: 'vegetable', name: 'carrot' }]
// }
// The original array is not mutated.

Key Takeaway:

The introduction of toReversed(), toSorted(), and toSpliced() in ES2023 (and now part of ES2024 standard) is a significant step towards encouraging immutability in JavaScript array operations, providing non-mutating alternatives to their long-standing mutating counterparts.

📌📌 Moe Javascript related topics and interview questions here:
Tricky javascript code part 3

Custom pipe to format numbers in Angular

MD ASHRAF — Wed, 02 Jul 2025 14:30:00 +0000

Here we are creating custom pipe to format large numbers (e.g., 1,000,000 → 1M).

pipe.ts

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

@Pipe({
  name: 'largeNumberFormat'
})
export class LargeNumberFormatPipe implements PipeTransform {
  transform(value: number): string {
    if (value >= 1000000) { // dividing number by 10L since 1M == 10L
      return (value / 1000000).toFixed(1) + 'M'; // toFixed(1) rounding till one decimal value
    } else if (value >= 1000) {
      return (value / 1000).toFixed(1) + 'K';
    } else {
      return value.toString(); // returning number itself in string format if less than thousand.
    }
  }
}

Usage in component.html

<p>{{ 1000000 | largeNumberFormat }}</p> // Output: 1.0M
<p>{{ 1000 | largeNumberFormat }}</p> // Output: 1.0K
<p>{{ 500 | largeNumberFormat }}</p> // Output: 500

Important: By default pipe is pure, meaning they only execute when the input value changes. If you want the pipe to execute on every change detection cycle, you can make it impure by setting the pure property to false:


@Pipe({
  name: 'largeNumberFormat',
  pure: false
})

When is an impure pipe useful?

An impure pipe is useful when the pipe's output depends on something other than the input value, such as:

Current time: If you want to display the time elapsed since a certain date, you would need an impure pipe to update the output every second.
Random numbers: If you want to generate a random number based on the input value, an impure pipe would be necessary.
External data: If the pipe's output depends on external data that can change outside of the component's control, an impure pipe might be necessary.

However, keep in mind that **impure pipes can have performance implications**, as they are executed on every change detection cycle. Therefore, use them judiciously and only when necessary.

📌📌 More Angular interview related stuff here:
Rxjs and Angular bonding

Cancelling HTTP request when Angular Component destroyed

MD ASHRAF — Tue, 01 Jul 2025 14:30:00 +0000

To cancel an ongoing HTTP request when a component is destroyed, you can use the following techniques:

Using takeUntil operator:

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>',
})
export class ExampleComponent implements OnDestroy {
  private ngUnsubscribe = new Subject<void>();

  constructor(private http: HttpClient) {
    this.http.get('https://api.example.com/data') // making http call
      .pipe(takeUntil(this.ngUnsubscribe)) // will subscribe to observanle until "ngUnsubscribe" is complete
      .subscribe((response) => {
        console.log(response);
      });
  }

  ngOnDestroy(): void {
    //marking ngUnsubscribe observable complete will unsubscribe the observable and request will get cancelled.
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

2.Using Subscription object

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>',
})
export class ExampleComponent implements OnDestroy {
  private subscription: Subscription;

  constructor(private http: HttpClient) {
    this.subscription = this.http.get('https://api.example.com/data')
      .subscribe((response) => {
        console.log(response);
      });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

However this approach is good for a single subscription if we have (n) subscriptions and we want to cancel all on component destroy(which is good practice), follow solution 1.

Why is it important?

Canceling ongoing HTTP requests when a component is destroyed is important to prevent memory leaks and improve the overall performance of your application. When a component is destroyed, any ongoing HTTP requests associated with that component should be cancelled to prevent unnecessary resource usage and potential errors.

📌📌 More Angular related topics here:
Rxjs and Angular bonding

Tricky javascript codes part 3

MD ASHRAF — Mon, 30 Jun 2025 14:30:00 +0000

We have 3 nested boxes (box1, box2, box3). When clicking each box, log its ID to the console. Clicking an inner box should NOT trigger clicks on outer boxes.

What is this question about?
This question is about event handling and event propagation in JavaScript, specifically how to control the flow of click events when you have nested HTML elements.

The core problem it addresses is how to prevent a click on an inner element from also triggering the click events of its parent (outer) elements. This is a common scenario in web development where you want specific actions to happen only when a particular element is clicked, and not its containers.

Solution: There are many ways to do the same but the more optimisez way is Wrapping all the divs inside one parent div having id as container.

Then adding event listener on this parent element

.html file:

<div id="container">
    <div id="box1" class="box">
      box1
      <div id="box2" class="box">
         box2
         <div id="box3" class="box">box3</div>
      </div>
    </div>
</div>

.css file

.box {
  min-width: 200px;
  width: fit-content; // to match width of div till its content
  border: 1px solid #000;
  padding: 15px;
}

#box1 {
  background-color: yellow;
  padding: 10px;
}
#box2 {
  background-color: cyan;
  padding: 10px;
}
#box3 {
  background-color: red;
}

script file.js

document.getElementById('container').addEventListener('click', event => {
  // Todo on click of container element or any of its child
  if (event.target.classList.contains('box')) {
    /* checking if click happens only on element having class as box, as we don't need to handle click for all other children of container as of now, instead of box.*/

    console.log('id is: ', event.target.id);
    event.stopPropagation(); // preventing event from propagation to parent on click of child element
  }
})

Live example here

IMPORTANT: As I have said earlier there can be many ways to solve this problem, we can add event listener to each individual divsalso, because only 3 divs are there for now, but if no. will be more then we will need loop etc.

So to avoid loop, we have taken parent element. we can take <body> also as a parent element, but then script will search to a wider aread of code and will be time consuming. Thus we have narrowed down the scope of event listener to a small area which is a div with id as container.

📌📌 More Javascript interview related code here:

Tricky Javascript code part2

Angular Directive that detects click outside of its host element

MD ASHRAF — Sun, 29 Jun 2025 14:30:00 +0000

Approach:

Angular directive needs to listen for click events on the entire document.
Then check if the clicked element is within its host element or not.

click-outside.directive.ts

Let's break down the code:

@Directive({ selector: '[appClickOutside]' }): This means you'll apply the directive to an HTML element like this: <div appClickOutside>...</div>

@HostListener('document:click', ['$event.target']): This tells Angular to listen for the click event on the entire document object, not just the host element itself. This is crucial for detecting clicks outside.

['$event.target']: This tells Angular to pass the target property of the click event (which is the actual DOM element that was clicked) as an argument to our onClickmethod.

const clickedInside = this.elementRef.nativeElement.contains(targetElement); : This line uses the contains() method of the DOM Node interface. It checks if the targetElement (the element that was clicked) is a descendant of the directive's host element (this.elementRef.nativeElement).

How to Use It:

Define in module:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ClickOutsideDirective } from './click-outside.directive'; // Import your directive

@NgModule({
  declarations: [
    AppComponent,
    ClickOutsideDirective // <---  Declare your directive
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

component.html

<div style="border: 2px solid blue; padding: 20px; margin: 50px;"
  appClickOutside   <-- THIS IS WHERE THE DIRECTIVE IS APPLIED -->
  clickOutside)="onClickedOutside()">  <-- THIS IS WHERE THE COMPONENT LISTENS TO THE DIRECTIVE'S OUTPUT -->
  This is the host element. Click anywhere outside this blue box!
  <button (click)="onButtonClick($event)">Click Me (Inside)</button>
</div>

<p *ngIf="message">{{ message }}</p>

Handling event on click in component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message: string = '';

  onClickedOutside(): void {
    this.message = 'Clicked outside the box!';
    console.log('Clicked outside the element!');
  }

  onButtonClick(event: Event): void {
    event.stopPropagation(); // Prevent the document click listener from firing immediately
    this.message = 'Button inside clicked!';
    console.log('Button inside clicked!');
  }
}

📌📌 More angular learnings here:

RXJS and Angular Bonding
Angular HTTP integration
XSS Attack and Angular Handling

Tricky Javascript Code part 2

MD ASHRAF — Sat, 28 Jun 2025 14:30:00 +0000

Find and print the name(s) of user(s) whose age is greater than 30 in nested object. In javascript

javascript file

Output

2.Flatten an array (input: [1,2,[3,4], 5], output: [1,2,3,4,5])

Solution 1: using flat() method:

const arr = [1, 2, [3, 4], 5];
const flattenedArr = arr.flat(); 
console.log(flattenedArr); // Output: [1, 2, 3, 4, 5]

but it will not flatten multiple Levels.

Solution 2: using flat() with Infinity

const arr = [1, 2, [3, 4, [5, 6]], 7];
const flattenedArr = arr.flat(Infinity);
console.log(flattenedArr); // Output: [1, 2, 3, 4, 5, 6, 7]

Solution 3: using recursion and for loop

function flattenArray(arr) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      result = result.concat(flattenArray(item));
      // ---------- OR ------
      // result = [...result, ...flattenArray(item)];
    } else {
      result.push(item);
    }
  });
  return result;
}

const arr = [1, 2, [3, 4, [5, 6]], 7];
const flattenedArr = flattenArray(arr);
console.log(flattenedArr); // Output: [1, 2, 3, 4, 5, 6, 7]

Solution 4: using recursion and reduce method

function flattenArray(arr) {
  return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flattenArray(val) : val), []);
}

const arr = [1, 2, [3, 4, [5, 6]], 7];
const flattenedArr = flattenArray(arr);
console.log(flattenedArr); // Output: [1, 2, 3, 4, 5, 6, 7]

📌📌 More Javascript Tricky questions here:
Tricky Javascript code part 1
Tricky Javascript code - Handling device orientation

Accessibility in Web development & Angular

MD ASHRAF — Fri, 27 Jun 2025 14:30:00 +0000

What is Accessibility and why? 😡😡#

It ensures equal access of information to people with disabilities, promotes inclusivity, and improves overall user experience, while also enhancing reputation and compliance with laws and regulations.

Accessible websites benefit people with disabilities, older adults, and everyone, regardless of abilities or environment. By prioritizing accessibility, organizations can create more inclusive and usable websites that reach a wider audience and drive better conversion rates.

Ways to achieve that in our website

1.Use semantic HTML:
- Use HTML elements that provide meaning to the structure of a web page, such as header, nav, main, section, article, aside, footer, etc.

- Example: `<header>...</header>`

2.Provide alternative text for images:
- Use the alt attribute to provide a text description of images, which can be read by screen readers.

- Example: `<img src="image.jpg" alt="Image description">`

3.Use ARIA attributes:
- Use ARIA attributes to provide additional information about dynamic content, such as aria-label, aria-describedby, aria-expanded, etc.
It can be read by screen readers so would be helpful for special group of people.

- Example: `<button aria-label="Close">X</button>`

4.Ensure keyboard navigation:
- Ensure that all interactive elements can be accessed using a keyboard, and that the tab order is logical.

- Example: Use tabindex attribute to specify the tab order: <button tabindex="1">...</button>

5.Use high contrast colors:
- Ensure that the color scheme has sufficient contrast between background and foreground colors, making it easier for users with visual impairments to read.
- Example: Use a tool like Snook's Color Contrast Checker to ensure sufficient contrast.

6.Provide closed captions for audio and video content:
- Provide closed captions for audio and video content, which can be read by users who are not able to listen or hard of hearing.

- Example: `<video> <track kind="captions" src="captions.vtt" srclang="en"> </video>`

7.Use Angular's built-in accessibility features:
- Use Angular's built-in accessibility features, such as the AccessibilityModule, to improve the accessibility of your application.

- Example: `import { AccessibilityModule } from '@angular/cdk/a11y';`

// Here's a full code example of using Angular's built-in accessibility features:

app.module.ts

app.component.html

In this example, we're using Angular's built-in accessibility features by:

Importing the A11yModule from @angular/cdk/a11y in our module.
Using ARIA attributes (aria-expanded, aria-label, aria-labelledby, aria-live, aria-atomic, aria-describedby) to provide additional information about dynamic content and interactive elements.
Using the role attributeto define the role of elements (e.g., menu, menuitem, tooltip).