How To Update a Component Without Refreshing Full Page – Angular

 How to Update a Component Without Refreshing the Full Page in Angular (Step-by-Step Guide)

Single Page Applications (SPAs) built with Angular are designed to be dynamic and responsive. But sometimes, updating a specific component without triggering a full-page refresh can be tricky, especially when data changes in a sibling or child component.

In this article, we’ll explore how to update Angular components dynamically without reloading the full page using services, observables, and change detection strategies. We’ll also walk through practical examples to help you implement this in your project easily.

 Common Use Case

Let’s say you have a dashboard page with a NotificationComponent and a TaskComponent. When a new task is created in TaskComponent, You want the NotificationComponent to update automatically without a full page reload.

Solution Overview

To update a component without reloading the entire page, use:

Shared Angular Service (for communication)

BehaviorSubject or Subject (for reactive data flow)

ngOnInit() lifecycle method (to subscribe and update)

ChangeDetectorRef if manual detection is required

Step-by-Step Example

Let’s walk through a real Angular example.

Step 1: Create a Shared Service

Create a service to hold the shared observable data.

ng generate service shared/data

// data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  private taskUpdateSource = new BehaviorSubject<boolean>(false);
  taskUpdated$ = this.taskUpdateSource.asObservable();
  notifyTaskUpdate() {
    this.taskUpdateSource.next(true);
  }
}

Step 2: Emit Event from Task Component

// task.component.ts
import { Component } from '@angular/core';
import { DataService } from '../shared/data.service';
@Component({
  selector: 'app-task',
  template: `
    <button (click)="createTask()">Add Task</button>
  `,
})
export class TaskComponent {
  constructor(private dataService: DataService) {}
  createTask() {
    // Your task creation logic
    console.log('Task created');
    // Notify NotificationComponent
    this.dataService.notifyTaskUpdate();
  }
}

Step 3: Listen in Notification Component

// notification.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../shared/data.service';
@Component({
  selector: 'app-notification',
  template: `
    <div *ngIf="showUpdate"> A new task has been added!</div>
  `,
})
export class NotificationComponent implements OnInit {
  showUpdate = false;
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.taskUpdated$.subscribe((status) => {
      this.showUpdate = status;
      // Optionally reset after 3 seconds
      setTimeout(() => {
        this.showUpdate = false;
      }, 3000);
    });
  }
}