Angular 4 CRUD Operation MVC – Angular 4 insert update delete
In this Post We Will Explain About is Angular 4 CRUD Operation MVC – Angular 4 insert update delete With Example and Demo.
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular 4 Tutorial – Create a CRUD App with Angular CLI
In this post we will show you Best way to implement Angular 4 CRUD, modals, animations, pagination, datetimepicker, hear for How to Angular 4 CRUD Operation MVC demo Example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
product.service.ts:
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Product } from './product'
@Injectable()
export class ProductSerice {
constructor(private http: Http) {
}
private headers = new Headers({ 'Content-Type': 'application/json' });
private productsUrl = 'api/products';
getProducts(): Promise<Product[]> {
return this.http.get(this.productsUrl)
.toPromise()
.then(response => response.json().data as Product[])
.catch(this.handleError);
}
getProduct(id: number): Promise<Product> {
const url = `${this.productsUrl}/${id}`;
return this.http.get(url)
.toPromise()
.then(response => response.json().data as Product)
.catch(this.handleError);
}
createProduct(product: Product): Promise<Product> {
return this.http
.post(this.productsUrl, JSON.stringify(product), { headers: this.headers })
.toPromise()
.then(res => res.json().data as Product)
.catch(this.handleError);
}
updateProduct(product: Product): Promise<Product> {
const url = `${this.productsUrl}/${product.id}`;
return this.http
.put(url, JSON.stringify(product), { headers: this.headers })
.toPromise()
.then(() => product)
.catch(this.handleError);
}
removeProduct(product: Product): Promise<void> {
const url = `${this.productsUrl}/${product.id}`;
return this.http.delete(url, { headers: this.headers })
.toPromise()
.then(() => null)
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
createProduct(product: Product): get a product object as varibles and makes a methods http POST request to ‘api/products’ with data as new product object. Created simple product is returned as Promise.
updateProduct(product: Product): get a product object as varibles and makes methods http PUT request to simple update product details by id.
removeProduct(product: Product): get product object as varibles and makes methods http DELETE request to simple delete product by id.
product-info.component.html:
<div *ngIf="product">
<md-card style="width: 30%">
<md-card-header>
<md-card-title>{{product.model}} details!</md-card-title>
</md-card-header>
<md-card-content>
<div><label>id: </label>{{product.id}}</div>
<div>
<label>model: </label>
<input [(ngModel)]="product.model" placeholder="model" />
</div>
<div>
<label>Manufacturer: </label>
<input [(ngModel)]="product.manufacturer" placeholder="manufacturer" />
</div>
</md-card-content>
<md-card-actions>
<button md-button (click)="goBack()"> Back </button>
<button md-button (click)="updateProduct()"> Update </button>
</md-card-actions>
</md-card>
<div>
product-info.component.ts:
import 'rxjs/add/operator/switchMap'
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { Product } from '../product';
import { ProductSerice } from '../product.service'
@Component({
selector: 'app-product-info',
templateUrl: './product-info.component.html',
styleUrls: ['./product-info.component.css']
})
export class ProductInfoComponent implements OnInit {
product: Product;
constructor(
private productService: ProductSerice,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit(): void {
this.route.params.switchMap((params: Params) => this.productService.getProduct(+params['id']))
.subscribe(product => this.product = product);
}
updateProduct(): void {
this.productService.updateProduct(this.product);
this.goBack();
}
goBack(): void {
this.location.back();
}
}
products.component.ts:
<h2>products</h2>
<form>
<md-input-container style="width:30%">
<input mdInput [(ngModel)]="newProduct.model" placeholder="Model" name="model">
</md-input-container>
<md-input-container style="width:30%">
<input mdInput [(ngModel)]="newProduct.manufacturer" placeholder="Manufacturer" name="manufacturer">
</md-input-container>
<button md-raised-button (click)="createProduct(newProduct)">Create Product</button>
<md-list>
<md-list-item *ngFor="let product of products" (click)="showInfo(product)">
<span>
{{product.model}}
</span>
<span>
<button md-raised-button (click)="removeProduct(product); $event.stopPropagation()">Delete</button>
</span>
</md-list-item>
</md-list>
</form>
products.component.ts:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Product } from '../product';
import { ProductSerice } from '../product.service';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsCompoenent implements OnInit {
products: Product[];
selectedProduct: Product;
newProduct: Product;
constructor(private router: Router, private productService: ProductSerice) {
}
ngOnInit() {
this.productService.getProducts().then(products => this.products = products);
this.newProduct = new Product();
}
createProduct(product: Product): void {
this.productService.createProduct(product)
.then(product => {
this.products.push(product);
this.selectedProduct = null;
});
}
removeProduct(product: Product): void {
this.productService
.removeProduct(product)
.then(() => {
this.products = this.products.filter(b => b !== product);
if (this.selectedProduct === product) { this.selectedProduct = null; }
});
}
showInfo(product: Product): void {
this.selectedProduct = product;
this.router.navigate(['/information', this.selectedProduct.id]);
}
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
<!-- Include all the routing simple Data -->
import { AppComponent } from './app.component';
import { ProductInfoComponent } from './product-info/product-info.component';
import { ProductsCompoenent } from './products/products.component';
import { ProductSerice } from './product.service';
<!-- Include all the routing simple Data -->
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { BikesDatabaseService } from './products-database.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
<!-- Include all the routing simple Data -->
import { AppRoutingModule } from './app-routing/app-routing.module';
import { MaterialModule, MdList, MdListItem } from '@angular/material'
<!-- Include simple Data -->
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(BikesDatabaseService),
MaterialModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule
],
declarations: [
AppComponent, //content AppComponent
ProductsCompoenent,
ProductInfoComponent,
],
bootstrap: [AppComponent],
providers: [ProductSerice],
})
export class AppModule { }
I hope you have Got Angular 4 CRUD, modals, animations, pagination, datetimepicker And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.
