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

Posted at: December 15, 2018 6:28 PM

admin.module.ts

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

admin-routing.module.ts

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 RSGiTECH 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.

RSGiTECH provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

RSGITECH will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.


Please leave comments

1 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