CRUD #2 Create, Edit, and Delete Blog with File Upload - Angular 6 / Angular 7

Posted at: December 15, 2018 6:28 PM


Import ReactiveFormsModule into src/app/admin/admin.module.ts

Complete code of admin.module.ts

Blog Service

Edit service file src/app/services/blog.service.ts and create these are methods getBlog, createBlog, updateBlog and deleteBlog

Blog Form Component

Create component blog-form for create and edit blog.

Import BlogService, Blog, FormBuilder, Validators, FormGroup, Router and ActivatedRoute into src/app/admin/blog-form/blog-form.component.ts

Edit file src/app/admin/blog-form/blog-form.component.html


Edit file src/app/admin/admin-routing.module.ts

Import BlogFormComponent component into src/app/admin/admin-routing.module.ts and set two routes create and edit blog.

Complete code of admin-routing.module.ts

Manage Blogs Component

Create onDelete method for detele blog in component file src/app/admin/manage-blogs/manage-blogs.component.ts

Add link of Add, Edit and Delete Blog.

Updates in API

Open Api controller and create method adminBlog, createBlog, updateBlog and deleteBlog.

Open Api_model and create method get_admin_blog, insertBlog, updateBlog, deleteBlog.

Changes in Database

Set image column NULL in blogs table.

You can watch video on CRUD #2 Create, Edit, and Delete Blog with File Upload - Angular 6 / Angular 7

CRUDLoginLogoutTokenWeb APIAuthenticationGuardInterceptorsServiceHTTPFile Upload

Please click below YouTube button for subscribe my channel truecodex for latest videos.

Angular Project Login - username: admin and password: admin

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications. provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7. will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Please leave comments


truecodex launched free android app. You can download and install truecodex app on your mobile and get notification of the latest post.

Video Tutorials on YouTube