Admin-view post Page

Post page:

set the design of post page

src/app/Admin/post/post.component.HTML


<section class="dashboard-wrap mtb-40">
    <div class="container">
          <div class="body-content">
          <div class="row">
            <div class="col-md-3">
                      <div class="dash-left">
                          <ul>
                              <li class="active"><a routerLink="/dashboard" routerLinkActive="active" class="nav-link">Dashboard</a></li>
                              <a routerLink="/Post" routerLinkActive="active" class="nav-link" >Posts</a>
                              <li><a href="#">Courses</a></li>
                              <li><a href="#">Pages</a></li>
                              <li><a href="#">Logout</a></li>
                          </ul>
                      </div>   
                  </div>
                  <div class="col-md-9">
                      <div class="dash-right">
                        <div class="dash-header">
                            <div class="dash-title">
                                <h1>{{title}}</h1>
                            </div>
                            <div class="dash-nav">
                                <a [routerLink]="['/admin/blogs/create']" class="btn btn-success">Add Post</a>
                            </div>
                          </div>
                          <table class="table table-bordered table-striped">
                            <tr>
                                <th>#ID</th>
                                <th>Image</th>
                                <th>Title</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                            <tr *ngFor="let post of allpost">
                                <td>{{post.Id}}</td>
                                <td><img src="../../../assets/images/{{post.Image}}" ></td>
                                <td>{{post.Title}}</td>
                                <td>{{post.EnteredDate | date: 'mediumDate'}}</td>
                                <td class="action">
                                    <a [routerLink]="['/admin/post/edit', post.Id]" class="btn btn-info btn-sm">Edit</a>
                                    <a (click)="onDelete(post.Id)" class="btn btn-danger btn-sm">Delete</a>
                                </td>
                            </tr>
                          </table>
                          {{error}}
                      </div>   
                  </div>
          </div>
          </div>
    </div>
  </section>

Create Class -post

Create a class as post

ng g class admin/post

Set the properties in the file src/app/Admin/post.ts

export class Posts {
    Id:number;
    Title:string;
    Sort_Desc:string;
    Full_Desc:string;
    Image:string;
    Author:string;
    EnteredDate:Date;
    IsActive:number;
}

PostService

create service PostService

ng g service admin/post

Edit in the file src/app/auth/employeeservice.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {  Observable } from 'rxjs';
import { Posts } from './posts';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  url = "http://localhost:54868/api/Courseposts";

  constructor(private http: HttpClient) { }
  getposts():Observable{
    debugger;
    return this.http.get(this.url);
  }
}

post.component.ts

Edit the file src/post/post.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  title = 'Posts';

  allpost: any;

  constructor(private postservice: PostService) { }

  ngOnInit() {
  
   
    this.postservice.getposts().subscribe((data) => {
      this.allpost = data
    })
  }
}

Change Web Api

CoursepostsController

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using Tutorialwebapi.Models;

namespace Tutorialwebapi.Controllers
{
    public class CoursepostsController : ApiController
    {
        private Dbmodels db = new Dbmodels();

        // GET: api/Courseposts
        public IQueryable GetCourseposts()
        {
            return db.Courseposts;
        }

        // GET: api/Courseposts/5
        [ResponseType(typeof(Coursepost))]
        public IHttpActionResult GetCoursepost(long id)
        {
            Coursepost coursepost = db.Courseposts.Find(id);
            if (coursepost == null)
            {
                return NotFound();
            }

            return Ok(coursepost);
        }

        // PUT: api/Courseposts/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutCoursepost(long id, Coursepost coursepost)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != coursepost.Id)
            {
                return BadRequest();
            }

            db.Entry(coursepost).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!CoursepostExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/Courseposts
        [ResponseType(typeof(Coursepost))]
        public IHttpActionResult PostCoursepost(Coursepost coursepost)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Courseposts.Add(coursepost);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = coursepost.Id }, coursepost);
        }

        // DELETE: api/Courseposts/5
        [ResponseType(typeof(Coursepost))]
        public IHttpActionResult DeleteCoursepost(long id)
        {
            Coursepost coursepost = db.Courseposts.Find(id);
            if (coursepost == null)
            {
                return NotFound();
            }

            db.Courseposts.Remove(coursepost);
            db.SaveChanges();

            return Ok(coursepost);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool CoursepostExists(long id)
        {
            return db.Courseposts.Count(e => e.Id == id) > 0;
        }
    }
}