Tech Seeker

In this article, we will implement CRUD operation in ReactJS(v18) application. ReactJS: ReactJS is a javascript library for creating user interface components. ReactJS components contains javascript function and they return JSX(JavaScript XML) as output. ReactJS effectively renders and update component on data changes. Create ReactJS(v18) Application: To create a ReactJS application our local machine should contain NodeJS. So go to 'https://nodejs.org/en/download/' Command to create ReactJS application npx create-react-app name-of-your-app Command to start the application. npm start Let's go through the project and explore important files. index.html: Inside the public folder we can see the index.html. Only the HTML file of the entire ReactJS application. It contained a 'div' element whose 'id' value is 'root', inside of this element all ReactJS components get rendered. index.js: Entry javascript file for ReactJS. It helps paint 'App' com

The main objectives of this article are: Create A HTTP Delete Endpoint In NestJS App Consume The Delete Endpoint In Angular App Create A HTTP Delete Endpoint In NestJS App: Let's implement the delete operation logic in 'SuperHeroesService'. NestJS_App/src/super-heroes/super-heroes.service.ts: async delete(id: string) { await this.superHeroModel.findByIdAndRemove(id); } Here 'findByIdAndRemove()' method deletes the document from the MongoDB collection. Let's add the HTTP Delete endpoint in our 'SuperHeroesController'. NestJS_App/src/super-heroes/super-heroes.controller.ts: import { Body, Controller, Delete, Get, Param, Post, Put } from '@nestjs/common'; import { SuperHeroes } from './schema/super-heroes.schema'; import { SuperHeroesService } from './super-heroes.service'; @Controller('super-heroes') export class SuperHeroesController { constructor(private superHeroService: SuperHeroesService) {} @Delete('/:

The main objectives of this article are: Create A Get By Id HTTP Get Endpoint In NestJS. Create A HTTP Put Endpoint In NestJS. Create Update Form In Angular App. Create A Get By Id HTTP Get Endpoint In NestJS: Let's create a get by id HTTP Get Endpoint. This endpoint is general to fetch the record that needs to be edited. In our 'SuperHeroesService' let's implement logic to fetch a document by the 'id' value. NestJS_App/src/super-heroes/super-heroes.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { SuperHeroes, SuperHeroesDocument } from './schema/super-heroes.schema'; // existing code hidden for display purpose @Injectable() export class SuperHeroesService { constructor( @InjectModel(SuperHeroes.name) private superHeroModel: Model<SuperHeroesDocument>, ) {} async getByid(id: string) { return await this.supe

The main objectives of this article are: Create HTTP Post Endpoint In NestJS Application. Angular Application Add A Form To Create New Item. Create HTTP Post Endpoint In NestJS Application: In our service file implement the logic to save a new document to the MongoDB. NestJS_App/src/super-heroes/super-heroes.service.ts: async create(superHeroes: SuperHeroes) { const newSuperHeroes = new this.superHeroModel(superHeroes); return await newSuperHeroes.save(); } Here our payload 'superHeroes' is converted to the MongoDB collection model document type and then invoking the 'save()' method that saves our new document into the MongoDB. Let's add the HTTP Post method to our controller. NestJS_App/src/super-heroes/super-heroes.controller.cs: import { Body, Controller, Get, Post } from '@nestjs/common'; import { SuperHeroes } from './schema/super-heroes.schema'; import { SuperHeroesService } from './super-heroes.service'; @Controller('su

The main objectives of this article are: Create HTTP GET endpoint  in nestjs application Consume GET API and render the response in angular component Create HTTP Get Endpoint In NestJS Application: In 'SuperHeroesService' implement logic to fetch the data from the MongoDB NestJS_App/src/super-heroes/super-heroes.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { SuperHeroes, SuperHeroesDocument } from './schema/super-heroes.schema'; @Injectable() export class SuperHeroesService { constructor( @InjectModel(SuperHeroes.name) private superHeroModel: Model<SuperHeroesDocument>, ) {} async getAll():Promise<SuperHeroes[]>{ return await this.superHeroModel.find().exec(); } } (12-14) The 'find()' method fetches all documents from the MongoDB collection. Let's create the 'SuperHereosController' in the '