Todo List Tutorial
Primary version
Search
K

#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;
}