Categories

Monday, December 2, 2024
#919814419350 therichposts@gmail.com
AngularAngular 16Angular 17Angular CrudBootstrap 5

Angular 16+ Crud using Json Server working Example

Angular 16+ Crud using Json Server working Example

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 16+ Crud using Json Server working Example.

Live Demo

Angular 16 came and if you are new then you must check below two links:

  1. Angular 16+ Basic Tutorials
  2. Angular Free Admin Templates
  3. Angular Free Ecommerce Templates
Angular 16+ Crud using Json Server working Example
Angular 16+ Crud using Json Server working Example
Angular crud json server api
Angular crud json server api

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 16 setup and for this we need to run below commands but if you already have angular 16 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project 

cd angulardemo // Go inside the Angular Project Folder 

ng g c api //will create api crud component

ng g s services/recipe //will create services files

ng g i models/recipe //will create interface file

npm i bootstrap

npm i @popperjs/core

2. Now guys we need to add below code inside angulardemo/angular.json files to call bootstrap 5 script and styles:

"styles": [
          ...
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
          "scripts": [
            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
          ]

3. Now guys we need to add below code inside src/app/api/api.component.html file:

<div class="container w-50 p-5">
    <h1 class="text-center pb-4 ">Add, Update and Delete a Recipe </h1>
    <form  #isFormValid="ngForm" [formGroup]="recipeFormGroup" class="form-group">

          <div class="mb-3">
            <!-- name -->
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" name="name" formControlName="name" id="name" placeholder="Enter Recipe Name">

            <!-- name errors -->
            <div *ngIf="name?.touched && name?.invalid">
              <small class="text-danger" *ngIf="name?.errors?.['required']">Name is required</small>
              <small class="text-danger" *ngIf="name?.errors?.['minlength']">Name is too short</small>
            </div>
          </div>

          <!-- price -->
          <div class="mb-3">
            <label for="price" class="form-label">Price</label>
            <input type="price" class="form-control" name="price" formControlName="price" id="price" placeholder="price">

            <!-- price errors -->
            <div *ngIf="price?.touched && price?.invalid">
              <small class="text-danger" *ngIf="price?.errors?.['required']">Price is required</small>
              <small class="text-danger" *ngIf="price?.errors?.['pattern']">Price is invalid</small>
            </div>
          </div>

          <!-- create(Add) or Update(put) -->
          <div class="mb-3">
            <!-- create -->
            <button *ngIf="!addOrPut" (click)="postRecipe()" class="form-control btn btn-dark hvr" [disabled]="!isFormValid.valid">Add</button>
            <!-- Update -->
            <button *ngIf="addOrPut" (click)="putRecipe()" class="form-control btn btn-warning hvr" [disabled]="!isFormValid.valid">Update</button>
          </div>
    </form>

<div *ngIf="array.length == 0" class="alert alert-warning text-center">Empty array</div>
</div>

<div *ngIf="array.length != 0" class="container w-50">
  <table class="table table-striped table-bordered">
      <thead>
          <tr>
              <th>#Id</th>
              <th>Name</th>
              <th>Price (MAD)</th>
              <th>Edit</th>
              <th>Delete</th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let eachCmd of array">
              <td scope="row">{{eachCmd.id}}</td>
              <td>{{eachCmd.name}}</td>
              <td>{{eachCmd.price}}</td>
              <td><button (click)="editRecipe(eachCmd)" class="btn btn-warning">Update</button></td>
              <td><button (click)="deleteRecipe(eachCmd.id)" class="btn btn-danger">Delete</button></td>
          </tr>

      </tbody>
  </table>
</div>

4. Now guys we need to add below code inside src/app/api/api.component.ts file:

import { Component, OnInit } from '@angular/core';
import { RecipeDto } from '../models/recipe.interface';
import { RecipeService } from '../services/recipe.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-api',
  templateUrl: './api.component.html',
  styleUrls: ['./api.component.css']
})

export class ApiComponent implements OnInit {
  array: RecipeDto[] = new Array<RecipeDto>();

  recipeFormGroup: FormGroup = new FormGroup({
    id: new FormControl<number>(+''),

    name: new FormControl<string>('', [
      Validators.required,
      Validators.minLength(3)
    ]),

    price: new FormControl<number>(+'', [
      Validators.required,
      Validators.pattern('[0-9]*'),
    ])
  });

  get name() {
    return this.recipeFormGroup.get('name');
  }

  get price() {
    return this.recipeFormGroup.get('price');
  }

  addOrPut = false;

  constructor(private recipeService:RecipeService) { }

  ngOnInit(): void {
    this.getRecipe();
  }

  getRecipe() {
    this.recipeService.getAll()
    .subscribe((data: RecipeDto[]) =>{
      this.array = data;
    })
  }

  deleteRecipe(id: number){
    this.recipeService.delete(id).subscribe(
      () => {this.array = this.array.filter( (aRecipe) => aRecipe.id != id)
      })
  }

  postRecipe(){
    if(!confirm(`api.component.ts:58 -> Did you run the JSON-SERVER ? if yes please comment this line`)) alert(`You should run the json-server  (read README file) ^^`);
    this.recipeService.post(this.recipeFormGroup.value)
    /*
      this.recipeFormGroup.value is equivalent to:
      {
        name,
        price
      }
    */
    .subscribe(
      (eachRecipe: any)=>{
          this.array = [eachRecipe, ...this.array];
          this.clearInputs();
    })

  }

  // make inputs empty
  clearInputs(){
    this.recipeFormGroup.reset({
      name: '',
      price: +''
    });
  }

  // edit recipeService
  editRecipe(eachRecipe: RecipeDto){
    this.recipeFormGroup.get('id')?.setValue(eachRecipe.id);
    this.recipeFormGroup.get('name')?.setValue(eachRecipe.name);
    this.recipeFormGroup.get('price')?.setValue(eachRecipe.price);
    this.addOrPut=true;
  }

  // update recipeService
  putRecipe(){
    this.recipeService.updateRecipe(this.recipeFormGroup.value)
   
    .subscribe( () => {
      this.clearInputs();
      this.getRecipe();
      this.addOrPut = false;
    })
  }
}

5. Now guys we need to add below code inside src/app/api/api.component.css file:

.hvr:hover{
    background-color: rgb(173, 201, 192);
    color:black;
}

6. Now guys we need to add below code inside src/app/models/recipe.interface.ts file:

export class RecipeDto {
    id!: number;
    name!: string;
    price!: number;
}

7. Now guys we need to add below code inside src/app/services/recipe.service.ts file:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment.prod';
import { RecipeDto } from '../models/recipe.interface';

@Injectable({
  providedIn: 'root'
})
export class RecipeService {
  urlApi= environment.api;

  constructor(private http:HttpClient) {   }

  // GET all
  getAll(){
    return this.http.get<RecipeDto[]>(this.urlApi);
  }

  // DELETE one
  delete(id: number){
    return this.http.delete(`${this.urlApi}/${id}`);
  }

  // CREATE one
  post(recipe: RecipeDto){
      return this.http.post<RecipeDto>(this.urlApi, recipe);
  }

  // UPDATE one
  updateRecipe(recipe: RecipeDto){
    return this.http.put(`${this.urlApi}/${recipe.id}`, recipe);
  }

  // search by id
  search(id: number){
      return this.http.get<RecipeDto>(`${this.urlApi}/${id}`); //${id}
  }

}

8. Now guys we need to add below code inside src/environments/environment.prod.ts file:

export const environment = {
  production: true,
  api: `http://localhost:42400/recipes`
};

9. Now guys please create `fakeDatabase.json` file on the project root and add below demo data inside it:

{
  "recipes": [
    {
      "id": 1,
      "name": "Butter Chicken",
      "price": "800"
    },
    {
      "id": 2,
      "name": "Mutton",
      "price": "980"
    }
  ]
}

10. Now guys inside package.json file add below line of code under scripts tag to run json server:

also run command npm json-server inside your terminal

"scripts": {
   ...
    "json-server": "json-server --watch fakeDatabase.json --port 42400"
  },

11. Guys in the end we need to add below code inside src/app/app.component.html file

<app-api></app-api>

Friends in the end must run ng serve command into your terminal to run the angular 17 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks 🙂

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.