Understanding Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

When building React applications, one of the fundamental decisions you’ll make is how your content gets rendered. Should it happen on the server or in the browser? Let’s explore both approaches with practical examples.

What is CSR (Client-Side Rendering)?

Client-Side Rendering means React runs entirely in the browser. The server sends a minimal HTML file with a JavaScript bundle, and React renders everything on the client.

Example — CSR App:

export default function App() {
  return (
    <main className="app-shell">
      <h1>React CSR Example</h1>
      <p>This page is rendered entirely on the client using React.</p>
      <button onClick={() => alert('Client-side React is active!')}>
        Click me
      </button>
    </main>
  )
}

When you load this page:

1. Browser receives blank HTML: <div id="root"></div>
2. JavaScript bundle downloads
3. White screen appears ← user sees nothing
4. React renders the content
5. Page becomes interactive

Pros:

• Fast subsequent navigation (SPA)
• Rich interactivity
• Simpler server requirements

Cons:

• Slow First Contentful Paint (FCP)
• Poor SEO (search engines see blank page)
• Large JavaScript bundle

CSR Flow Analysis & Improvement

Current CSR Flow Issue

You’re seeing an empty <div id="root"></div> because the JavaScript bundle hasn't loaded yet.

Current flow:

1. Browser requests http://localhost:4173
2. Server sends index.html with empty root div
3. White screen appears ⏳
4. Browser downloads index-CvKRpKXl.js
5. React renders into #root
6. Page becomes visible

Blank white screen displays during client-side image rendering.

What is SSR (Server-Side Rendering)?

Server-Side Rendering means React runs on the server, generates HTML, and sends it to the browser. The browser receives ready-to-display content immediately.

Example — SSR App:

import './style.css'

export default function App() {
  return (
    <main className="app-shell">
      <h1>React SSR Example</h1>
      <p>This page is rendered on the server and hydrated on the client.</p>
      <button onClick={() => alert('Client hydration works!')}>
        Click me
      </button>
    </main>
  )
}

Server-side (entry-server.jsx):

import { renderToString } from 'react-dom/server'
import App from './App'

export function render() {
  return renderToString(<App />)
}

In Server-Side Rendering (SSR), the server generates the full HTML for a page before sending it to the browser. This makes better for SEO.

When you load this page:

1. Server renders React to HTML string
2. Browser receives full HTML content immediately ← instant display
3. JavaScript bundle downloads in background
4. React hydrates the page (attaches listeners)
5. Page becomes interactive

Pros:

• Fast First Contentful Paint (FCP) ✅
• Better SEO (search engines see full HTML)
• Smaller initial JavaScript

Cons:

• Slower server response time
• More server resources needed
• Complex setup

What is Hydration?

Hydration means making a webpage interactive after it loads.

In SSR, the server sends the page HTML first, so users can see the content quickly.

But initially:

• Buttons do not work
• Click events do not work
• React is not active yet

After JavaScript loads, React connects everything and makes the page interactive.

That process is called Hydration.

When to Use Each?

Use CSR when:

• Building internal dashboards (SEO doesn’t matter)
• Users have fast internet
• You prioritize developer experience
• Real-time updates are critical

Use SSR when:

• SEO is important (blogs, e-commerce, marketing sites)
• You need fast First Contentful Paint
• Users have slow networks
• You can handle server complexity

Conclusion: SSR and CSR aren’t competing approaches — they solve different problems. Choose based on your users, content type, and infrastructure.

Source Code:https://github.com/manpreet1719/React-Learning
LinkedIn:https://www.linkedin.com/in/manpreet-kamboj-37178716b/

Below is the UI implementation in React. Take a look at the code provided to see how the user interface is structured and styled within a React application.

<div style={{
                position: 'absolute',
                left: '50%',
                bottom: '60px',
                fontSize: '48px',
                lineHeight: '1',
                width: '48px',
                height: '48px'
            }} onClick={() => handleDisplayFlyingEmoji('fire')}>
                🔥</div>
            <div className="flying-emojis" ref={overlayRef}>
                <style>
                    {`
        .flying-emojis {
          backgroundColor:red;
          position: fixed;
          top: 0px;
          bottom: 0px;
          left: 0px;
          right: 0px;
          overflow: hidden;
          pointer-events: none;
          user-select: none;
          z-index: 99;
        }

        .flying-emojis .emoji {
          position: absolute;
          left: 50%;
          bottom: 60px;
          font-size: 48px;
          line-height: 1;
          width: 48px;
          height: 48px;
        }

        .flying-emojis .emoji.wiggle-1 {
          animation: emerge 3s forwards, wiggle-1 1s ease-in-out infinite alternate;
        }


        @keyframes emerge {
          to {
            bottom: 85%;
            opacity: 0;
          }
        }

        @keyframes wiggle-1 {
          from {
            margin-left: -20px;
          }
          to {
            margin-left: 50px;
          }
        }
      `}
                </style>
            </div>

Let me explain the animation in that are used —

.flying-emojis .emoji.wiggle-1 {
          animation: emerge 3s forwards, wiggle-1 1s ease-in-out infinite alternate;
        }

        @keyframes emerge {
          to {
            bottom: 85%;
            opacity: 0;
          }
        }

        @keyframes wiggle-1 {
          from {
            margin-left: -20px;
          }
          to {
            margin-left: 50px;
          }
        }

1. animation: emerge 3s forwards, wiggle-1 1s ease-in-out infinite alternate;: This line sets up two animations for the selected elements. The first animation is called emerge, which lasts for 3 seconds and moves the emojis upwards and fades them out. The second animation is called wiggle-1, which lasts for 1 second, wiggles the emojis back and forth, and repeats infinitely in an alternate direction.
2. @keyframes emerge: This defines the emerge animation. It starts with the emojis at their original position and ends with them moving up to 85% of the container's height and fading out completely.
3. @keyframes wiggle-1: This defines the wiggle-1 animation. It starts with the emojis having a margin-left of -20 pixels (which means they are shifted 20 pixels to the left from their original position), and ends with them having a margin-left of 50 pixels (which means they are shifted 50 pixels to the right from their original position). This creates a wiggling effect as they move back and forth.

Let’s make the animation work.

const handleRemoveFlyingEmoji = useCallback((node) => {
        if (!overlayRef.current) return;
        overlayRef.current.removeChild(node);
    }, []);


const handleDisplayFlyingEmoji = useCallback(
        (emoji) => {
            console.log(emoji);
            if (!overlayRef.current) {
                return;
            }

            console.log(`⭐ Displaying flying emoji: ${emoji}`);

            const node = document.createElement('div');
            node.appendChild(document.createTextNode(EMOJI_MAP[emoji]));
            node.className = 'emoji wiggle-1'
            node.style.transform = `rotate(${-30 + Math.random() * 60}deg)`;
            overlayRef.current.appendChild(node);

            node.addEventListener('animationend', (e) => {
                console.log("removed")
                handleRemoveFlyingEmoji(e.target)
            });
        },
        [handleRemoveFlyingEmoji]
    );

The function handleDisplayFlyingEmoji is used to create a div element, apply a classname, transformation, and then append it to the parent div element. Additionally, it adds an event listener for the 'animationed' event, which helps in removing the created element from the DOM.

The useCallback hook is employed to prevent the creation of a new function instance on each rendering.

Avoiding Memory Leaks —

    // Remove all event listeners on unmount to prevent console warnings
    useEffect(() => {
        return () => {
            if (overlayRef.current) {
                console.log("Unmounted");
                overlayRef.current?.childNodes.forEach((n) => {
                    n.removeEventListener('animationend', handleRemoveFlyingEmoji);
                });
            }
        };
    }, []);

It helps us remove the event listener to prevent memory leaks.

Here’s the entire code combined —

import React, { useEffect, useRef, useCallback } from 'react';

const EMOJI_MAP = {
    fire: '🔥',
}


export const FlyingEmoji = () => {

    const overlayRef = useRef();

    const handleRemoveFlyingEmoji = useCallback((node) => {
        if (!overlayRef.current) return;
        overlayRef.current.removeChild(node);
    }, []);



    const handleDisplayFlyingEmoji = useCallback(
        (emoji) => {
            console.log(emoji);
            if (!overlayRef.current) {
                return;
            }

            console.log(`⭐ Displaying flying emoji: ${emoji}`);

            const node = document.createElement('div');
            node.appendChild(document.createTextNode(EMOJI_MAP[emoji]));
            node.className = 'emoji wiggle-1'
            node.style.transform = `rotate(${-30 + Math.random() * 60}deg)`;
            overlayRef.current.appendChild(node);

            node.addEventListener('animationend', (e) => {
                console.log("removed")
                handleRemoveFlyingEmoji(e.target)
            });
        },
        [handleRemoveFlyingEmoji]
    );


    // Remove all event listeners on unmount to prevent console warnings
    useEffect(() => {
        return () => {
            if (overlayRef.current) {
                console.log("Unmounted");
                overlayRef.current?.childNodes.forEach((n) => {
                    n.removeEventListener('animationend', handleRemoveFlyingEmoji);
                });
            }
        };
    }, []);


    return (
        <>
            <div style={{
                position: 'absolute',
                left: '50%',
                bottom: '60px',
                fontSize: '48px',
                lineHeight: '1',
                width: '48px',
                height: '48px'
            }} onClick={() => handleDisplayFlyingEmoji('fire')}>
                🔥</div>
            <div className="flying-emojis" ref={overlayRef}>
                <style>
                    {`
        .flying-emojis {
          backgroundColor:red;
          position: fixed;
          top: 0px;
          bottom: 0px;
          left: 0px;
          right: 0px;
          overflow: hidden;
          pointer-events: none;
          user-select: none;
          z-index: 99;
        }

        .flying-emojis .emoji {
          position: absolute;
          left: 50%;
          bottom: 60px;
          font-size: 48px;
          line-height: 1;
          width: 48px;
          height: 48px;
        }

        .flying-emojis .emoji.wiggle-1 {
          animation: emerge 3s forwards, wiggle-1 1s ease-in-out infinite alternate;
        }


        @keyframes emerge {
          to {
            bottom: 85%;
            opacity: 0;
          }
        }

        @keyframes wiggle-1 {
          from {
            margin-left: -20px;
          }
          to {
            margin-left: 50px;
          }
        }
      `}
                </style>
            </div>
        </>

    );
};

export default FlyingEmoji;

Final output —

So that’s how you implement flying emojis! Thank you.

Linkedin — https://www.linkedin.com/in/manpreet-kamboj-37178716b/

In this blog post, we’ll dive into implementing infinite scrolling, enhancing the user experience along the way. Let’s outline the states to this implementation:

• items: Holds the list of items to display.
• loading: Signals when the user reaches the bottom of the screen, indicating the need to load more items.
• page: Facilitates making API calls as the user scrolls to the bottom, incrementing the page number accordingly.
• hasmore: Indicates whether additional data is available.

Code for these States

 const [items, setItems] = useState([]);
 const [loading, setLoading] = useState(false);
 const [page, setPage] = useState(1);
 const [hasmore, setHasMore] = useState(true);

I haveimplemented a fetchData function to facilitate API calls and manage the data retrieval process. This function plays a crucial role in fetching the necessary items from the server and updating the UI accordingly.

  const fetchData = async () => {
 
        if (loading && !hasmore) return;

        setLoading(true);

        try {
            let res = await fetch(`https://dummyjson.com/products?limit=10&skip=${(page - 1) * 10}`);
            let data = await res.json();
            setItems((prevItems) => [...prevItems, ...data.products]);
            data.products.length > 0 ? setHasMore(true) : setHasMore(false);
            setLoading(false);
        } catch (err) {
            console.log(err);
            setLoading(false);
        };
    }

    useEffect(()=> {
        if(hasmore){
            fetchData();
        }
        
    },[page])

Using the dummyjson api for fetching the data

Certainly! In JavaScript, when dealing with scrolling behavior, understanding the properties scrollTop, clientHeight, and scrollHeight is crucial.

• scrollTop: This property represents the vertical scroll position of an element. It indicates how far the top of the content is scrolled from the top of its container. If the element is at the top of the scrollable area, scrollTop is 0.
• clientHeight: It represents the height of the viewport or the visible content area of an element. In the context of scrolling, it signifies the height of the portion of the element’s content that is currently visible to the user without scrolling.
• scrollHeight: This property represents the total height of an element’s content, including content not visible on the screen due to overflow. It essentially represents the entire height of the content, both visible and hidden.

In the handleScroll function provided, these properties are utilized to detect when the user has scrolled to the bottom of the page. When scrollTop + clientHeight equals or exceeds scrollHeight, it indicates that the user has reached the bottom, prompting further action, such as loading more content or triggering an API call to fetch additional data.

Utilizing the useEffect hook, we can efficiently manage a scroll event listener, ensuring it's activated when the component mounts and removed upon unmounting. This approach enhances code organization and prevents memory leaks.

   const handleScroll = () => {
        const { scrollTop, clientHeight, scrollHeight } =
            document.documentElement;
        if (scrollTop + clientHeight >= scrollHeight) {
           
            setPage((prevPage) => prevPage + 1);

        }
    }

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

Let’s review the implementation of the InfiniteScroll component code together.

import { useEffect, useState, useCallback } from "react"

const InfiniteScroll = () => {

    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(false);
    const [page, setPage] = useState(1);
    const [hasmore, setHasMore] = useState(true);



    const fetchData = async () => {
        
        if (loading && !hasmore) return;

        setLoading(true);

        try {
            
            let res = await fetch(`https://dummyjson.com/products?limit=10&skip=${(page - 1) * 10}`);
            let data = await res.json();
            setItems((prevItems) => [...prevItems, ...data.products]);
            data.products.length > 0 ? setHasMore(true) : setHasMore(false);
            setLoading(false);
        } catch (err) {
            console.log(err);
            setLoading(false);
        };
    }

    const handleScroll = () => {
        const { scrollTop, clientHeight, scrollHeight } =
            document.documentElement;
        if (scrollTop + clientHeight >= scrollHeight) {
           
            setPage((prevPage) => prevPage + 1);

        }
    }
    useEffect(()=> {
        if(hasmore){
            fetchData();
        }
        
    },[page])

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);


    return (
        <div>
            <ul >
                {items.map((item, index) => (
                    <li style={{height:'200px', border:'2px solid black', marginBottom : '10px'}} key={index}>{item.title}</li>
                ))}
            </ul>
            {loading && <p>Loading...</p>}
            {!hasmore  && <p>No More data ......</p>}
        </div>
    )

}

export default InfiniteScroll

In this explanation of Infinite Scrolling, we can enhance our approach by tapping into optimization potential through the implementation of a Custom Hook and design patterns. Suggestions and enhancements to the code are warmly welcomed to ensure performance and maintainability.

linkedin — https://www.linkedin.com/in/manpreet-kamboj-37178716b/

Let’s explore how to implement the Singleton Design pattern.

1 Step : Adding Private Constructor

By including a private constructor within the class, you can prevent users from creating new instances of the class.

public class Singleton {
    
    // making Constructor as private.
    private Singleton(){}

}

2 Step: Adding static instance

Now we are declaring a static instance of Class and static method to get the required instance .You might be wondering why the use of static is crucial in this context .
This is because a variable declared with the ‘static’ keyword is shared across all objects of the class, and a ‘static’ method is used to access the static instance of the class.

public class Singleton {

    //declaring static instance of Class.
    public static  Singleton instance;


    private Singleton(){}

   //adding a static method to get required instance
    public static Singleton getInstance(){
        if(instance == null){
             instance = new Singleton();
        }
        return instance;
    }


}

Inside the getInstance() method, it first checks if an instance of the class exists. If it doesn't, a new instance is created, otherwise the existing instance is returned.

Step 3: Using Singleton Class

Now, you can use the Singleton throughout your application:

public class Main {
    public static void main(String[] args) {

        System.out.println("Singleton pattern in Java");
        System.out.println(Singleton.getInstance());
    }
}

Implementing Thread Safe Singleton

So what is problem in previous Singleton implementation ?

The Singleton design pattern is used to ensure that a class has only one instance and provides a global point of access to that instance. When dealing with multithreaded applications, it’s possible that multiple threads may try to create instances of the singleton simultaneously. This can lead to multiple instances being created, violating the singleton pattern.

How to solve this Problem ?

One way to do this is by using a synchronized block or method. When we use synchronized (Singleton.class), you are synchronizing on the class object itself, which means that only one thread can enter the synchronized block at a time. Here's an example of how you might implement a thread-safe Singleton pattern using synchronized (Singleton.class)only we have to make changes ingetInstance() method.

public static Singleton getInstance(){
    if(instance == null){
        synchronized (Singleton.class) {
            if (instance == null) {
                instance = new Singleton();
            }
        }
    }
    return instance;
}

In this code, the synchronized (Singleton.class) block is used to ensure that only one thread can enter it at a time. This is where the instance of the Singleton is created if it doesn't already exist. This double-checked locking approach helps improve performance by avoiding unnecessary synchronization after the instance has been created.

Summary

The Singleton Design Pattern ensures that there’s only one instance of a class in your application, promoting resource efficiency and providing global accessibility.

Follow me — https://www.linkedin.com/in/manpreet-kamboj-37178716b/

Let’s examine the requirements for a Tic Tac Toe game:

1. The game board should be adaptable in size, starting with the standard 3x3 grid but allowing for customization to an ‘n’ size grid.
2. The game should support multiple players, with each player having the freedom to select their preferred symbol, which can be ‘X,’ ‘O,’ or any other character.
3. The game must provide a mechanism to determine a winner, where one player successfully forms a winning combination, or it should be able to identify a tie when no more moves are possible.

We are currently looking at these requirements, but we can add more if necessary.

Let’s think about the entities that will be involved in our game.

1. Cell -> The smallest unit in the game, representing an individual space on the game board. Each cell can be marked with either an ‘X’ or ‘O,’ denoting the CellType.

2. Board -> The core entity that comprises a 2D array of cells, forming the playable grid for the game. This board is central to various game operations and interactions.

3. Player -> An entity that encompasses the player’s name and the chosen symbol (e.g., ‘X’ or ‘O’). Additional attributes can be included as needed.

4. Game -> Used for Initializing the Game with all its properties.

Let’s now consider creating a Class Diagram.

Cell entity

A Cell is responsible for determining the symbol (‘X’ or ‘O’), and it’s further divided into two classes: CellX and CellO, both of which are subclasses of the Cell class means CellX and CellO is-a Cell class.

public class Cell {
   CellType cellType;
   Cell(CellType cellType){
       this.cellType = cellType;
   }
}
// Cell Class

public class CellX extends Cell{
    CellX(){
        super(CellType.X);
    }
}

public class CellO extends  Cell{
    CellO(){
        super(CellType.O);
    }
}

CellType is a enum used to provide symbols.

public enum CellType {
    X,
    O
}

Player entity

public class Player {

    String name;
    Cell cellType;
    Player(String name,Cell cellType){
        this.name = name;
        this.cellType = cellType;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setCellType(Cell cellType) {
        this.cellType = cellType;
    }

    public Cell getCellType() {
        return cellType;
    }

}

The Player entity includes a Cell means Player has-a Cell , indicating their chosen symbol (‘X’ or ‘O’), and has attributes for their name, along with corresponding getter and setter methods to access and modify name attribute.

Board entity

public class Board {

    public int size;
    public Cell[][] board;
    Board(int size){
        this.size = size;
        board = new Cell[size][size];
    }
    boolean getFreeCells(){
        for(int i = 0;i<size;i++){
            for(int j = 0;j<size;j++){
                if(board[i][j] == null){
                    return true;
                }
            }
        }
        return false;
    }

    boolean addAtPostion(int x,int y,Cell cell){
        if(board[x][y] != null){
            return false;
        }
        board[x][y] = cell;
        return true;
    }
    public void printBoard() {

        for (int i = 0; i < size; i++) {
            for (int j = 0; j < size; j++) {
                if (board[i][j] != null) {
                    System.out.print(board[i][j].cellType.name() + "   ");
                } else {
                    System.out.print("    ");

                }
                System.out.print(" | ");
            }
            System.out.println();

        }
    }



}

Board is a entity having a Cell means board class has-a Cell entity used for creating a 2-D matrix of Cell datatype , having a size which can be added according to our requirement.

The Board class offers functions like:

• printBoard(): This function displays the current state of the board.
• addAtPosition(): It allows us to place 'X' or 'O' symbols at specific positions on the board.
• getFreeCells(): This function checks if there are any empty cells left on the board.

Game Class

import java.util.*;

public class Game {

    Deque<Player> players;
    Board gameboard;
    Game(){
        players = new LinkedList<Player>();
        CellX cellX = new CellX();
        players.add(new Player("Player1",cellX));
        CellO cellY = new CellO();
        players.add((new Player("Player2",cellY)));
        gameboard = new Board(3);
    }
    public String startGame(){

        boolean isWinner = true;
        while(isWinner){
            Player playerturn = players.removeFirst();
            gameboard.printBoard();
            boolean freeCells = gameboard.getFreeCells();
            if(!freeCells){
                isWinner = false;
                continue;
            }

            System.out.print("Player " + playerturn.getName() + "Enter Position");
            Scanner inputScanner = new Scanner(System.in);
            String s = inputScanner.nextLine();
            String[] values = s.split(",");
            int inputRow = Integer.valueOf(values[0]);
            int inputColumn = Integer.valueOf(values[1]);

            boolean isValidPosition = gameboard.addAtPostion(inputRow,inputColumn,playerturn.cellType);

            if(!isValidPosition){
                System.out.print("Please Enter valid Position");
                players.addFirst(playerturn);
                continue;
            }
            players.addLast(playerturn);

            boolean iswinner = isWinner(inputRow,inputColumn,playerturn.cellType.cellType);
            if(iswinner){
                 return playerturn.name;
            }
        }
        return "Match Tie";
    }

    public boolean isWinner(int row,int column,CellType cellType){
        boolean isrow = true;
        boolean isColumn = true;
        boolean isDiagonal = true;
        boolean isAntiDiagonal = true;
        for(int i = 0;i<gameboard.size;i++){
            if(gameboard.board[row][i] == null || gameboard.board[row][i].cellType != cellType){
                isrow = false;
            }
        }
        for(int i = 0;i<gameboard.size;i++){
            if(gameboard.board[i][column] == null || gameboard.board[i][column].cellType != cellType){
                isColumn = false;
            }
        }
        for(int i = 0,j=0;i<gameboard.size;i++,j++){
            if(gameboard.board[i][j] == null || gameboard.board[i][j].cellType != cellType){
                isDiagonal = false;
            }
        }
        for(int i = 0,j= gameboard.size-1;i< gameboard.size;i++,j--){
            if(gameboard.board[i][j] == null || gameboard.board[i][j].cellType != cellType){
                isAntiDiagonal = false;
            }
        }
        return isrow || isColumn || isDiagonal || isAntiDiagonal;
    }



}

The Game class is designed with several key components:

• Game class has-a Board and Player as part of its internal structure.
• The startGame() function initiates the game.
• The isWinner() function is responsible for determining the game's winner.
• It employs a dequeue data structure to manage players, allowing for a turn-based rotation where players are removed from the front and added to the end of the dequeue, ensuring they get their turns.

Main Class

public class Main {
    public static void main(String[] args) {
        Game game = new Game();
        String result = game.startGame();
        if(result == "Tie"){
            System.out.println("Game is " +  result);
        }else{
            System.out.println("Winner is " + result);
        }

    }
}

The main class serves as the entry point for starting the game and displaying the game result.

This completes our LLD of Tic Tac Toe .

Complete code Github link — https://github.com/manpreet1719/System-Design-LLD/tree/main/TicTacToe/src

Follow me on LinkedIn — https://www.linkedin.com/in/manpreet-kamboj-37178716b/

However it is not a perfect solution. It still needs some improvements. Please provide your feedback .

What is ngAfterViewInit ?

A lifecycle hook that is called after Angular has fully initialized a component’s view. Define an ngAfterViewInit() method to handle any additional initialization tasks.

What is ngAfterContentInit ?

A callback method that is invoked immediately after Angular has completed initialization of all of the directive’s content. It is invoked only once when the directive is instantiated.

This definition is from the documentation, but let’s break it down and understand it better with an example.

//parent Component template file.

<app-child>
    <div #ContentProjectionTemplate>
        <h1>Content Projection</h1>
    </div>
</app-child>

We’ve made a parent component that includes a child component. We use a technique called “content projection” to insert the child component’s content into the parent component and assigning it the ID “ContentProjectionTemplate” for later access. We’ll explore this projected content in more detail as we proceed.

//child Template file
<div #Template>
  <h1>Child Component</h1>
</div>
<ng-content></ng-content>

We’ve created a <div> element with the ID "Template" for easy access. Inside this element, we've included <ng-content></ng-content> to inform the child component that there is “ContentProjectionTemplate” code projected within the parent component.

import { Component, ContentChild, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @ViewChild('Template',{static : false}) Template : ElementRef

  @ContentChild('ContentProjectionTemplate',{static : false}) ContentProjectionTemplate : ElementRef;


  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
    console.log("ngAfterViewInit")
    console.log(this.Template); // Refer to -> Element Ref -> some object
    console.log(this.ContentProjectionTemplate); // Refer to -> Element Ref -> some object
  }
  ngAfterContentInit() {
    console.log("ngAfterContentInit")
    console.log(this.Template); // Refer to -> undefined
    console.log(this.ContentProjectionTemplate);// Refer to -> Element Ref -> some object
  }

}

In this code, we’re doing two things:

1. We’re using @ViewChild to grab a <div> element in the child component using the ID “Template”
2. We’re also using @ContentChild to access content that's been projected into the child component from the parent component, which is identified by the ID “ContentProjectionTemplate”

Now let us check the output

1 . When we console log the values of “Template” and “ContentProjectionTemplate ”in the ngAfterViewInit lifecycle hook, both refer to some object.

2 . When we attempt to log the values of “Template” and “ContentProjectionTemplate” within the ngAfterContentInit lifecycle hook, we will observe that the “Template” variable is undefined, while “ContentProjectionTemplate” will refer to some object.

Here we can Clearly see the Difference

In ngAfterContentInit, the “Template” is still undefined because only the content projection within the component has been initialized. However, in ngAfterViewInit, the entire view's DOM (Document Object Model) has finished initializing, including the “Template” and all its elements.

I hope you liked it follow me on linkedin — https://www.linkedin.com/in/manpreet-kamboj-37178716b/

What is package.json?

The package.json is the principal place to configure and define how to interact with and manage your application. For example, the npm CLI uses this file to start your project, install dependencies, run scripts, etc.

In the world of Node.js development, package.json and package-lock.json play important roles in managing project dependencies and ensuring consistency across different developers environments. When npm install command is run then NPM will generate the node_modules folder and package-lock.json file. You might wonder why package-lock.json is generated if you already have a package.json file.

What is need of package-lock.json?

However, the package-lock.json solve crucial issue maintaining version consistency.

Consider this scenario —

Developer 1 works on a project and Developer 2 joins the team later to implement a new feature. Without a package-lock.json file, running ‘npm install’ could result in the installation of different dependency versions. This is where package-lock.json shines it locks the required dependencies and versions, ensuring that all team members are on the same page. By committing the package-lock.json file, you establish a shared reference point. When another developer clones the project and runs npm install, they’ll get the exact packages and versions specified in the package-lock.json file.

What is tilde (~) and Caret (^) ?

In your package.json file, you’ll often encounter two symbols: the tilde (~) and the caret (^). These symbols are essential for defining version ranges:

The tilde (~) signifies a safe update strategy. For instance, if you see ‘~1.0.8,’ version it means npm will install version 1.0.8 or any later patch version like 1.0.9. This keeps you within the same minor version.

The caret (^) represents a compatible update strategy. If you encounter 1.0.3 version npm will install version 1.0.3 or the latest minor or patch version, like 1.1.0, while still staying within the same major version.

In summary, package.json and package-lock.json are important tools for Node.js developers, ensuring project consistency and facilitating collaborative development by locking dependencies and defining version ranges with precision.

Follow — https://www.linkedin.com/in/manpreet-kamboj-37178716b/

Why Run Code Outside NgZone?

Before diving into how to run code outside of NgZone, it’s essential to understand why you might want to do so. Angular default behaviour is to trigger change detection on every user interaction, timer event, or asynchronous operation. While this ensures that your application remains responsive, it can also lead to unnecessary and frequent change detection cycles, which impact performance.

Running specific code outside NgZone can be beneficial in the following situations:

1. Performance Optimization: Running code outside of NgZone can significantly improve your application’s performance by reducing the frequency of change detection cycles.
2. Avoiding Unnecessary Change Detection: Some operations, like third-party library callbacks or WebSocket events, don’t require Angular to check for changes. Running these operations outside NgZone can prevent Angular from needlessly evaluating your component templates.
3. Preventing Expression Evaluation: In cases where you want to prevent Angular from evaluating expressions in templates, running code outside NgZone can help.

How to Run Code Outside NgZone?

To run code outside NgZone, Angular provides a utility function called runOutsideAngular. This function allows you to execute a specific piece of code outside the Angular change detection zone. Here's how to use it:

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

@Component({
  selector: 'app-component',
  template: `
    <!-- Your component template -->
  `,
})
export class MyComponent {
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    // Run code outside NgZone
    this.ngZone.runOutsideAngular(() => {
      // Place your code here
      // This code will not trigger change detection
    });
  }
}

In the above example, we import the NgZone service and use its runOutsideAngular method to execute code outside the Angular zone. Any code placed within this function won't trigger change detection, providing a performance boost for the specified operations.

Here’s an example of running an event inside and outside the NgZone in an Angular component:

// Run Inside NgZone
<button (click)="runInsideZone()">Run Inside NgZone</button> 

//Run Outside NgZone
<button #Zoneless>Run Outside NgZone</button>

<p>Counter (Inside NgZone): {{ counterInside }}</p>
<p>Counter (Outside NgZone): {{ counterOutside }}</p>

import { Component, ElementRef, NgZone, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  counterInside = 0;
  counterOutside = 0;

  @ViewChild('Zoneless',{static : true,read: ElementRef}) buttonelement;

  constructor(private ngZone: NgZone) {}



  ngOnInit(){
    this.ngZone.runOutsideAngular(() => {
      this.buttonelement.nativeElement.addEventListener("click", () => {
        console.log("onClick");
        this.counterOutside++;
      });
    });
  }

  runInsideZone() {
    // This event handler runs inside the NgZone.
    this.ngZone.run(() => {
      this.counterInside++;
    });
  }
}

In this example, there are two buttons: “Run Inside NgZone” and “Run Outside NgZone.” When you click the “Run Inside NgZone” button, its associated event handler runs inside the NgZone, automatically triggering Angular’s change detection. This results in an increase in the counterInside value, which is reflected in the view. However, when you click the "Run Outside NgZone" button, its event handler runs outside the NgZone. As a result, the counterOutside count does not increase immediately, and you need to manually trigger Angular's change detection for the view to update with the new count. This example illustrates the difference in behavior between running code inside and outside of the NgZone in an Angular application.