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.
This lesson also available on YouTube
More Posts - Angular Project Training
- Project Overview and Setup
- Bootstrap Integration
- Project Structure and Create Modules and Components
- Theme Integration and Create Home Page
- Create Routing, Navigation and Inner Page
- Service and Http Client, Blog Listing and Featured Blog
- Service and Http Client for Blog Detail, Recent Blog and Categories
- Service and Http Client for Create Static Pages
- Create Contact Form and Send Data on Email
- Login and Logout using Web API with Token Based Authentication
- CRUD #1 Admin can View Blog List
- CRUD #2 Create, Edit, and Delete Blog with File Upload
- Set HTTP Base URLs of Production and Development Environment
- Angular Project Deployment on Live Server
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.
truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.
truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.
Please leave comments
7 Comments
