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

Speed Up Your Magento Store by 300%

Angular Templates

React Templates

Magento 2 Templates

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