#6 ⚙️Connect Database

Create custom pipes

We will add two custom pipes in our app
  • Excerpt: which will show a summary of post in blog card.
  • Slug: which will show the URL slug for a post.
We will create a a new pipe named ExcerptPipe. Right-click on the folder 📁custompipes and then navigate to 'Angular Generator', select 'Pipe' and provide the name ‘excerpt.
Replace the transform method in the file 📝 src/app/custompipes/excerpt.pipe.ts with the following code :
transform(content: string) {
const postSummary = content.replace(/(<([^>]+)>)/ig, '');
if (postSummary.length > 300) {
return postSummary.substr(0, 300) + ' [...]';
} else {
return postSummary;
}
}
Furthermor we create a slug pipe. Right-click on the folder 📁custompipes and then navigate to 'Angular Generator', select 'Pipe' and provide the name ‘slug’.
Replace the transform method in the file 📝 src/app/custompipes/slug.pipe.ts with the following code:
transform(title: string) {
const urlSlug = title.trim().toLowerCase().replace(/ /g, '-');
return urlSlug;
}

Get the blogs from database

We will add the getAllPosts method in 📝src/app/services/blog.service.ts file to fetch all the blog posts from database. The definition for getAllPosts is shown at blog.service.ts (Github)
getAllPosts(): Observable<any> {
const blogs = this.db.collection('blogs', ref => ref.orderBy('createdDate', 'desc')).snapshotChanges().pipe(
map(actions => {
return actions.map(
c => ({
postId: c.payload.doc.id,
...c.payload.doc.data()
}));
}));
return blogs;
}
Copy link
On this page
Create custom pipes
Get the blogs from database