Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • πŸ‘€About
    • #0: πŸ’ƒ Introduction
    • #1: βŒ› Installations
      • a. StackBlitz instructions
    • #2: πŸ…° Angular kicks in
    • #3: πŸ“ Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: πŸ’Ό Class
    • #6: πŸ“₯ Property binding
    • #7: πŸ“€Event binding
    • #8: πŸ“Ž Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: πŸ“‹ The To Do list
    • #10: βž• New component: todo-item
    • #11: β›“ Interface
      • a. StackBlitz instructions
    • #12: πŸ“ŒAdd items
    • #13: 🚧 Refactor App Component
    • #14: πŸ’… Adding Style
    • #15: πŸ”‹ Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: πŸ’ΎLocal storage
    • #18: πŸ—‘ Remove item
    • #19: πŸ”˜ Adding a checkbox
    • #21: πŸ’ͺ Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: πŸ›° Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 βš™οΈConfiguring firebase
      • #2 πŸ’…Add Angular Material
      • #3 πŸ’…Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 βš™οΈConnect Database
      • #6 πŸ’…Add Feed
      • #7 ✏️Edit Post
      • #9 πŸš€Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  • Add a BlogCardComponent
  • Add the BlogCardComponent to the home page
  1. More Workshops
  2. Blog Editor

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

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;
}
Previous#6 βš™οΈConnect DatabaseNext#7 ✏️Edit Post

Last updated 5 years ago

Open πŸ“src/app/components/blog-card.component.html and REPLACE what is there with the HTML shown at

Open src/app/components/blog-card/blog-card.component.scss and REPLACE what is there with the style definitions shown at

blog-card.component.html (Github)
blog-card.component.scss (Github)