#6 💅Add Feed

Add a BlogCardComponent
Create a new blog card component. Therefore right-click on the folder 📁components and then navigate to 'Angular Generator', select 'Component' and provide the name 'blog-card'.
Open 📝src/app/components/blog-card.component.tsand add the following imports
import { BlogService } from 'src/app/services/blog.service';
import { Post } from 'src/app/models/post';
Inject the Blog Service in the constructor of BlogCardComponent class as shown below.
constructor(private blogService: BlogService) { }
Add a property to hold the current blog post.
blogPost: Post[] = [];
Now we will create a method to get the blog post and invoke it inside ngOnInit in 📝src/app/components/blog-card.component.ts file.
ngOnInit() {
    this.getBlogPosts();
}
​
getBlogPosts() {
    this.blogService.getAllPosts().subscribe(result => {
    this.blogPost = result;
    });
}
Open 📝src/app/components/blog-card.component.html and REPLACE what is there with the HTML shown at blog-card.component.html (Github)​
Open src/app/components/blog-card/blog-card.component.scss and REPLACE what is there with the style definitions shown at blog-card.component.scss (Github)​
Add the BlogCardComponent to the home page
We will display the blog card on home page. Open 📝src/app/components/home.component.html and REPLACE what is there with the following HTML.
<div class="row left-panel">
    <div class="col-md-9">
        <app-blog-card></app-blog-card>
    </div>
</div>
Open 📝src/app/components/home/home.component.scss and add the following style definition inside it.
.left-panel {
    margin-top: 15px;
}

#6 ⚙️Connect Database

#7 ✏️Edit Post

Last modified 2yr ago

Copy link

On this page

Add a BlogCardComponent

Add the BlogCardComponent to the home page