Skip to content
InfinityKnow

InfinityKnow

Infinity Knowledge (IK) : Technology, Articles, Topics, Facts or many More.

  • Home
  • Education
    • yttags
    • Make Money
    • Jobs
    • Programming
      • Technology
      • Web Design
      • WEB HOSTING
      • Interview
  • Entertainment
    • pakainfo
    • Sports
    • Tips and Tricks
      • Law
      • Photography
      • Travel
  • Health
    • Insurance
    • Lifestyle
      • Clothing
      • Fashion
      • Food
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • News
    • Political
  • Home Improvement
  • Trading
    • Marketing
    • Top Tranding
    • Business
    • Real Estate
  • Full Form
  • Contact Us
  • restaurant sales
    How satisfying the guests affect restaurant sales? Food
  • Fullmaza
    Fullmaza 2021: Download 300MB Bollywood Hollywood Dual Audio HD 720p Movies Movies
  • Include common header and footer using Vuejs - router-view
    Include common header and footer using Vuejs – router-view Technology
  • Angularjs Scroll to top With Router Autoscroll
    Angularjs Scroll to top With Router Autoscroll Technology
  • Vuejs Simple Bootstrap progress bar with percentage
    Vuejs Simple Bootstrap progress bar with percentage Technology
  • All details about mercury car Insurance in 2021 Insurance
  • Angularjs Insert Update Delete CRUD
    Angularjs Insert Update Delete CRUD Technology
  • How to Make Money Online without investment in Australia
    How to Make Money Online without investment in Australia Make Money
Angular 4 CRUD Operation MVC - Angular 4 insert update delete

Angular 4 CRUD Operation MVC – Angular 4 insert update delete

Posted on June 30, 2018 By admin No Comments on Angular 4 CRUD Operation MVC – Angular 4 insert update delete

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

Example

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);
}

READ :  Page Titles Dynamically Using AngularJS - ng-page-title Example

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.model}} details!

{{product.id}}







[/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’;

READ :  AngularJS Grid CRUD Example - Angular UI Grid

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










{{product.model}}






[/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]

READ :  JQuery Ajax Add Remove Input Fields Dynamically

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]

Example

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.

Related posts:

  1. AngularJS CRUD Insert Update Delete with PHP and MySQL
  2. Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations
  3. Vuejs and Laravel insert update delete with Pagination Component
  4. Angular Insert Update Delete Using PHP MySQLi
Technology, AngularJs, Laravel, MySQL, PHP Tags:angular 6 crud, angular 6 crud application example, angular 6 crud example, angular 6 crud github, angular 6 crud operation, angular 6 crud with web api, angular 6 example application, angular 6 grid with crud operations

Post navigation

Previous Post: Google Adsense Highest Cost Per Click (CPC) Keywords
Next Post: Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager

Related Posts

  • Angular ng-focus Directive Set Focus on Textbox Technology
  • CCAvenue Payment Gateway Integration in PHP
    CCAvenue Payment Gateway Integration in PHP Technology
  • php sort multidimensional array by value descending Example Technology
  • VueJS Update Object in array v-for loop
    VueJS Update Object in array v-for loop Technology
  • Angularjs Simple Pie chart using JSON Example Step by Step
    Angularjs Simple Pie chart using JSON Example Step by Step Technology
  • angularbind – AngularJS Bind Function – Angular Binding Examples
    angularbind – AngularJS Bind Function – Angular Binding Examples Technology

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Account web hosting (1)
  • AngularJs (277)
  • Articles (143)
  • Asp.Net (49)
  • Astrology (2)
  • Attorney (7)
  • Auto Car Insurance (4)
  • Biography (2)
  • Business (9)
  • Business Insurance (3)
  • California (4)
  • Choose the web hosting (1)
  • Clothing (6)
  • cloud (8)
  • Cloud data storage (2)
  • Credit (1)
  • Dedicated hosting server web (1)
  • Dedicated server web hosting (1)
  • Dedicated web hosting (1)
  • Degree (11)
  • Design (9)
  • Differences shared hosting (1)
  • Donate (2)
  • Education (37)
  • Energy web hosting (1)
  • Entertainment (6)
  • Facts (12)
  • Fashion (3)
  • Finance (3)
  • Food (5)
  • full form (90)
  • Google Adsense (22)
  • Health (20)
  • Home Improvement (5)
  • Insurance (6)
  • Interview (2)
  • Jobs (6)
  • jquery (2)
  • jQuery (2)
  • Laravel (164)
  • Lawyer (4)
  • Lifestyle (6)
  • Loans (6)
  • Make Money (31)
  • Managed dedicated server (1)
  • Managed hosting solution (1)
  • Managed servers (1)
  • Marketing (8)
  • Mortgage (2)
  • Movies (21)
  • MySQL (180)
  • News (5)
  • Photography (1)
  • PHP (250)
  • Programming (18)
  • Quotes (75)
  • Real Estate (2)
  • SEO (9)
  • Shared web hosting (1)
  • Shayari (67)
  • Sports (5)
  • Status (34)
  • Stories (45)
  • suvichar (8)
  • Tech (3)
  • Technology (675)
  • Tips and Tricks (42)
  • Top Tranding (35)
  • Trading (28)
  • Travel (12)
  • Uncategorized (8)
  • VueJs (179)
  • Web Design (2)
  • WEB HOSTING (1)
  • Web hosting company (1)
  • Web hosting really (1)
  • Web hosting windows (1)
  • Which website hosting (1)
  • Wishes (13)
  • wordpress (15)

Categories

AngularJs (277) Articles (143) Asp.Net (49) Attorney (7) Business (9) Clothing (6) cloud (8) Degree (11) Design (9) Education (37) Entertainment (6) Facts (12) Food (5) full form (90) Google Adsense (22) Health (20) Home Improvement (5) Insurance (6) Jobs (6) Laravel (164) Lifestyle (6) Loans (6) Make Money (31) Marketing (8) Movies (21) MySQL (180) News (5) PHP (250) Programming (18) Quotes (75) SEO (9) Shayari (67) Sports (5) Status (34) Stories (45) suvichar (8) Technology (675) Tips and Tricks (42) Top Tranding (35) Trading (28) Travel (12) Uncategorized (8) VueJs (179) Wishes (13) wordpress (15)
  • bhasha ke kitne roop hote hain Facts
  • rekhta shayari Shayari
  • irl full form – irl Kya Hai, Meaning and Abbreviation – What is the full form of irl ? full form
  • Vuejs deep nested computed properties
    Vuejs deep nested computed properties Technology
  • Angular interview questions for freshers Technology
  • VueJS Dynamic change Component template Dynamic Components
    VueJS Dynamic change Component template Dynamic Components Technology
  • Is hiring an Unlimited Graphic Design Service India with the hype? Design
  • Advanced Search using Laravel 5.8
    Advanced Search using Laravel 5.8 Example PHP

Copyright © 2022 InfinityKnow.

Powered by PressBook News WordPress theme