#6 💅Add Feed
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.ts
and add the following importsimport { 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)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;
}
Last modified 4yr ago