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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

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

Okay