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:
[php]
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
return this.http.get(this.productsUrl)
.toPromise()
.then(response => response.json().data as Product[])
.catch(this.handleError);
}
getProduct(id: number): Promise
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
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
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
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
console.error(‘An error occurred’, error);
return Promise.reject(error.message || error);
}
}
[/php]
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:
[php]
product-info.component.ts:
[php]
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();
}
}
[/php]
products.component.ts:
[php]
products
[/php]
products.component.ts:
[php]
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]);
}
}
[/php]
app.module.ts:
[php]
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;
import { ProductInfoComponent } from ‘./product-info/product-info.component’;
import { ProductsCompoenent } from ‘./products/products.component’;
import { ProductSerice } from ‘./product.service’;
import { InMemoryWebApiModule } from ‘angular-in-memory-web-api’;
import { BikesDatabaseService } from ‘./products-database.service’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AppRoutingModule } from ‘./app-routing/app-routing.module’;
import { MaterialModule, MdList, MdListItem } from ‘@angular/material’
@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 { }
[/php]
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.