{
        path: 'blogs',
        loadChildren: () =>
          import('./pages/all-blog/all-blog-routing.module').then(
            (m) => m.AllBlogRoutingModule
          ),
      },
      {
        path: 'blogs/:id',
        loadChildren: () =>
          import('./pages/blog-details/blog-details-routing.module').then(
            (m) => m.BlogDetailsRoutingModule
          ),
      },

<div class="blog-card">
<div class="blog-title">
      <h3>{{ data?.title }}</h3>
    </div>
    <div class="blog-read">
      <a [routerLink]="['/blogs', data?.id]">Read More</a>
    </div>
</div>

export class DetailsComponent {


  // Store Data
  id: string;
  blogDetails: any = null;

  // Subscriptions
  private subGetData1: Subscription;
  private subRouteData1: Subscription;

  // Inject
  private readonly activateRoute = inject(ActivatedRoute);
  private readonly blogService = inject(BlogService);

  ngOnInit(): void {
    // GET DATA FROM PARAM
    this.subRouteData1 = this.activateRoute.paramMap.subscribe(param => {
      this.id = param.get('id');
      if (this.id) {
        this.getArticleById(this.id);
      }
    });

  }


  /**
* HTTP REQ HANDLE
* getAllProductMenu()
*/

  private getArticleById(id: any) {
    this.subGetData1 = this.blogService.getArticleById(id).subscribe({
      next: res => {
        this.blogDetails = res;
        // console.log("blogDetails", this.blogDetails);
      },
      error: err => {
        console.log(err);
      }
    })
  }


  /**
* On Destroy
*/
  ngOnDestroy() {
    if (this.subGetData1) {
      this.subGetData1.unsubscribe();
    }
    if (this.subRouteData1) {
      this.subRouteData1.unsubscribe();
    }
  }



}