# #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.ts`and 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)](https://github.com/ng-girls/todo-list-tutorial/blob/master/workshops/blog-editor/code/07-blog-card/blog-card.component.html)

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)](https://github.com/AnkitSharma-007/blogsite/blob/master/src/app/components/blog-card/blog-card.component.scss)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ng-girls.gitbook.io/todo-list-tutorial/more-workshops/index/07_add_feed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.