I am looking to display the details of a blog on a separate link in Angular. Within my Angular setup, I have a Blog file (blog.component.ts) and a service that retrieves all the blog data from an API backend created with Strapi. Each individual blog has a button that allows users to view the complete detail of the blog on a different link by referencing the unique ID, which is linked to 'pagina.component.ts'. To achieve this, I believe it's necessary to reference the ID of each blog.
Below is the code snippet from my blog.component.html where I already have a list of blogs:
<section class="articles">
<article class="blue-article" *ngFor="let data of datas; index as i">
<div class="articles-header">
<time>{{ data.fecha }}</time>
<span class="articles-header-tag-blue">{{ data.relevante }}</span>
<span class="articles-header-category">
<a href="#" class="blue" title="">{{ data.category.name }}</a>
</span>
</div>
<div class="articles-content">
<h1><a title="">{{ data.title }}</a></h1>
<!--<img *ngIf="!data.image" class="foto" [src]="data.image.name" alt="foto">-->
<div *ngIf="data.image">
<img
src="http://localhost:1337{{ data.image.url }}"
alt="foto"
width="100%"
/>
</div>
<p>
{{ data.content }}
</p>
<h3>{{ data.description }}</h3>
</div>
<div class="articles-footer">
<ul class="articles-footer-info">
<li><a href="#" class="light-link" title=""><i class="pe-7s-comment"></i> 7 Replies</a>
</li>
<li><a href="#" class="light-link" title=""><i class="pe-7s-like"></i> 1221</a></li>
</ul>
<a [routerLink]="['./pagina', i]" class="btn">Read More</a>
</div>
</article>
</section>
Next, here is the content from my blog.component.ts file:
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { StrapiService } from '../../../services/strapi.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
datas:any=[];
errores:string="";
constructor(
public strapiserv:StrapiService,
private router: Router
) { }
ngOnInit(): void {
this.title.setTitle('Blog');
this.strapiserv.getData().subscribe(res=>{
this.datas= res as string[];
}, error =>{
console.log(error);
if(error.status == 0){
this.errores="Error Code: "+error.status+ "\n A client-side error or network error has occurred.";
}else{
this.errores="Error Code: "+error.status+"\n\n"+error.statusText;
}
})
}
}
The Angular service I'm using is named 'strapi.service.ts' and here's its implementation:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class StrapiService {
REST_API: string ='http://localhost:1337/articles';
httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
constructor(private httpClient: HttpClient) { }
getData():Observable<any>{
console.log();
let API=this.REST_API;
return this.httpClient.get(API,{headers:this.httpHeaders}) .pipe(
map((data:any) => {
return data;
}), catchError( error => {
return throwError(error);
})
)
}
}
Finally, the code snippet from my pagina component where I intend to display the detailed blog content is provided below:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { StrapiService } from '../../../../services/strapi.service';
@Component({
selector: 'app-pagina',
templateUrl: './pagina.component.html',
styleUrls: ['./pagina.component.scss']
})
export class PaginaComponent implements OnInit {
data:any = {};
constructor( private activatedRoute: ActivatedRoute,
private router: Router,
public strapiserv:StrapiService
){
this.activatedRoute.params.subscribe( params => {
this.data = this.strapiserv.getData( params['id'] );
});
}
ngOnInit(): void {
}
}
The routes configured for my application are as follows:
const routes: Routes = [
{ path: 'blog', component: BlogComponent },
{ path: 'pagina/:id', component: PaginaComponent },
];