For me

Aap E-commerce Website ke Header + Navigation Flow aur Authentication-based UI Changes chahte hain, jisme:

• ✅ Header me konsa button kab show hoga
• ✅ User login hone ke baad Profile/Register ka visibility control
• ✅ Buy, Like, Comment buttons ka logic
• ✅ Live Data (Real-time Updates) kaise implement hoga

Chaliye sab kuch step-by-step cover karte hain! 🚀

---

🛠 1. Header Navigation (Header.component.html)

Header me dynamic buttons hone chahiye jo user ke role aur authentication ke basis pe show hon.

📌 Header Components & Navigation

<nav>
  <a routerLink="/">🏠 Home</a>
  <a routerLink="/products">🛍 Shop</a>

  <!-- User Not Logged In -->
  <ng-container *ngIf="!isLoggedIn">
    <a routerLink="/login">🔑 Login</a>
    <a routerLink="/signup">📝 Register</a>
  </ng-container>

  <!-- User Logged In -->
  <ng-container *ngIf="isLoggedIn">
    <a routerLink="/profile">👤 Profile</a>
    <a routerLink="/cart">🛒 Cart ({{ cartCount }})</a>
    <a (click)="logout()">🚪 Logout</a>
  </ng-container>

  <!-- Admin Panel Link (Only for Admins) -->
  <ng-container *ngIf="isAdmin">
    <a routerLink="/admin">⚙️ Admin Panel</a>
  </ng-container>
</nav>

---

🔥 2. Header Logic (Header.component.ts)

Yeh logic user login hone ke baad dynamic buttons ko control karega.

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { CartService } from '../services/cart.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  isLoggedIn = false;
  isAdmin = false;
  cartCount = 0;

  constructor(private authService: AuthService, private cartService: CartService) {}

  ngOnInit() {
    // Check if user is logged in
    this.authService.isAuthenticated().subscribe(status => {
      this.isLoggedIn = status;
      this.isAdmin = this.authService.getUserRole() === 'admin';
    });

    // Cart Count Update (Real-time)
    this.cartService.cartCount$.subscribe(count => {
      this.cartCount = count;
    });
  }

  logout() {
    this.authService.logout();
  }
}

---

🚀 3. Register/Login ke baad UI Change

🔹 Jab user register ya login karega, toh:

• Header me Profile, Cart, Logout buttons show honge.
• Login/Register button hide ho jayega.
• Buy Now, Like, Comment buttons enable ho jayenge.

---

🛍 4. Buy Now Button (Product Detail Page)

• Login ke baad enable hoga.
• Click karne pe checkout page pe le jayega.
• Agar user logged in nahi hai, toh login page pe redirect karega.

✅ Button UI (product-detail.component.html)

<button *ngIf="isLoggedIn" (click)="buyNow()">🛒 Buy Now</button>
<button *ngIf="!isLoggedIn" routerLink="/login">🔑 Login to Buy</button>

✅ Button Logic (product-detail.component.ts)

buyNow() {
  if (!this.isLoggedIn) {
    this.router.navigate(['/login']);
  } else {
    this.router.navigate(['/checkout']);
  }
}

---

❤️ 5. Like & Comment Feature

🔹 Like Button:

• Only logged-in users can like.
• Clicking toggles like/unlike.

🔹 Comment Box:

• Only logged-in users can comment.
• Live updates (real-time comments).

✅ Like Button UI (product-detail.component.html)

<button *ngIf="isLoggedIn" (click)="toggleLike()">
  ❤️ {{ liked ? 'Unlike' : 'Like' }}
</button>
<button *ngIf="!isLoggedIn" routerLink="/login">🔑 Login to Like</button>

✅ Like Button Logic (product-detail.component.ts)

toggleLike() {
  this.liked = !this.liked;
  this.productService.updateLike(this.productId, this.liked).subscribe();
}

---

✅ Comment Section UI (product-detail.component.html)

<div *ngIf="isLoggedIn">
  <textarea [(ngModel)]="commentText" placeholder="Write a comment..."></textarea>
  <button (click)="postComment()">💬 Comment</button>
</div>

<div *ngFor="let comment of comments">
  <p>{{ comment.text }} - <strong>{{ comment.user }}</strong></p>
</div>

✅ Comment Logic (product-detail.component.ts)

postComment() {
  if (this.commentText.trim() !== '') {
    this.productService.postComment(this.productId, this.commentText).subscribe(newComment => {
      this.comments.push(newComment);  // Live Update
      this.commentText = '';
    });
  }
}

---

🔄 6. Live Data (Real-Time Updates)

• WebSocket ya Firebase Realtime Database ka use karke updates live dikhaye ja sakte hain.
• Agar WebSocket use karna hai, toh har naye like/comment pe page auto-update hoga.

✅ WebSocket Implementation (Real-Time Comments)

import { WebSocketService } from '../services/websocket.service';

ngOnInit() {
  this.webSocketService.listen('newComment').subscribe(comment => {
    this.comments.push(comment); // Live update
  });
}

postComment() {
  this.webSocketService.emit('postComment', { text: this.commentText, user: this.authService.getUser() });
}

---

🎯 Final Summary

Feature	Condition	Action
Header UI	Logged in	Show Profile, Cart, Logout
Header UI	Not logged in	Show Login, Register
Buy Now	Logged in	Goes to Checkout
Buy Now	Not logged in	Redirects to Login
Like Button	Logged in	Toggle Like
Like Button	Not logged in	Redirects to Login
Comments	Logged in	Post Comment
Comments	Not logged in	Redirects to Login
Live Data	WebSocket	Auto-update Comments

---