DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

Param

      {
        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
          ),
      },
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode
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();
    }
  }



}
Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay