Angular Mini Blog App – Beginner Class Task

 

 Step 1: Create a New Angular App

bash

ng new blog-app
cd blog-app

Choose CSS and say No to Angular routing when prompted.

---

 Step 2: Generate Components

bash

ng generate component blog-list
ng generate component blog-form

---

Step 3: Create Blog Model

Create a file named blog.model.ts in the src/app folder:

ts

export interface Blog {
  id: number;
  title: string;
  content: string;
  author: string;
  date: string;
}

---

Step 4: Create Blog Service

bash

ng generate service blog

Update blog.service.ts:

ts

import { Injectable } from '@angular/core';
import { Blog } from './blog.model';

@Injectable({
  providedIn: 'root'
})
export class BlogService {
  private blogs: Blog[] = [
    {
      id: 1,
      title: 'Welcome to the Blog!',
      content: 'This is the first blog post.',
      author: 'Admin',
      date: new Date().toLocaleDateString()
    }
  ];

  getBlogs(): Blog[] {
    return this.blogs;
  }

  addBlog(blog: Blog) {
    blog.id = this.blogs.length + 1;
    blog.date = new Date().toLocaleDateString();
    this.blogs.push(blog);
  }
}

---

📄 Step 5: Blog List Component

blog-list.component.ts:

ts

import { Component, OnInit } from '@angular/core';
import { Blog } from '../blog.model';
import { BlogService } from '../blog.service';

@Component({
  selector: 'app-blog-list',
  templateUrl: './blog-list.component.html'
})
export class BlogListComponent implements OnInit {
  blogs: Blog[] = [];

  constructor(private blogService: BlogService) {}

  ngOnInit(): void {
    this.blogs = this.blogService.getBlogs();
  }
}

blog-list.component.html:

html

<h2>Blog Posts</h2>
<div *ngFor="let blog of blogs">
  <h3>{{ blog.title }}</h3>
  <p>{{ blog.content }}</p>
  <small>By {{ blog.author }} on {{ blog.date }}</small>
  <hr>
</div>

---

✍️ Step 6: Blog Form Component

blog-form.component.ts:

ts

import { Component } from '@angular/core';
import { BlogService } from '../blog.service';
import { Blog } from '../blog.model';

@Component({
  selector: 'app-blog-form',
  templateUrl: './blog-form.component.html'
})
export class BlogFormComponent {
  newBlog: Blog = {
    id: 0,
    title: '',
    content: '',
    author: '',
    date: ''
  };

  constructor(private blogService: BlogService) {}

  addBlog() {
    this.blogService.addBlog({ ...this.newBlog });
    this.newBlog = {
      id: 0,
      title: '',
      content: '',
      author: '',
      date: ''
    };
  }
}

blog-form.component.html:

html

<h2>Add New Blog Post</h2>
<form (ngSubmit)="addBlog()">
  <input [(ngModel)]="newBlog.title" name="title" placeholder="Title" required><br><br>
  <textarea [(ngModel)]="newBlog.content" name="content" placeholder="Content" required></textarea><br><br>
  <input [(ngModel)]="newBlog.author" name="author" placeholder="Author" required><br><br>
  <button type="submit">Add Blog</button>
</form>

---

Step 7: Enable FormsModule

In app.module.ts, import FormsModule:

ts

import { FormsModule } from '@angular/forms';

Add it to the imports array:

ts

imports: [
  BrowserModule,
  FormsModule
]

---

Step 8: Update app.component.html

html

<app-blog-form></app-blog-form>
<hr>
<app-blog-list></app-blog-list>

---

Run Your App

bash

ng serve

Open in your browser: http://localhost:4200