Tech Seeker

In this article, we are going to implement a CRUD example sample of Angular(v14) using the Angular Material(v14) UI components. Angular: Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our code simple and clean. Angular components compose of 3 files like TypeScript(*.ts), HTML File(*.html), CSS File(*.css) Components typescript file and HTML file support 2-way binding which means data flow is bi-directional. The component typescript file listens for all HTML events from the HTML file. Create Angular(14) Application: Let's create the Angular(14) application to accomplish our demo. Make sure to install the Angular CLI tool into our local machine because it provides easy CLI commands to play with the angular application. npm install -g @angular/cli Run the below command to create Angular application ng new name_of_your_project While creating the app CLI needs a few inputs from us: (1) Add the

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

The main objectives of this article are: Create A Get By Id HTTP Get Endpoint In NestJS. Create A HTTP Put Endpoint In NestJS. Consume NestJS HTTP Put Endpoint From The ReactJS Create A Get By Id HTTP Get Endpoint In NestJS: Let's create a get by id HTTP Get Endpoint. This endpoint is generally to fetch the record that needs to be edited. In our 'EmployeeService' let's implement logic to fetch a document by the 'id' value. NestJS_App/src/employee/employee.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { Employee, EmployeeDocument } from './schema/employee-schema'; // existing code hidden for display purpose @Injectable() export class EmployeeService { constructor( @InjectModel(Employee.name) private employeeModel: Model<EmployeeDocument>, ) {} async getByid(id: string) { return await this.employeeModel.findById

The main objectives of this article are: Create A HTTP Post Endpoint In The NestJS Application. React App To Consume HTTP Post Endpoin Create A HTTP Post Endpoint In The NestJS Application: In our service file implement the logic to save a new document to the MongoDB. NestJS_App/src/employee/employee.service.ts: async create(employee: Employee) { const newEmployee = new this.employeeModel(employee); return await newEmployee.save(); } Here our payload 'employee' is converted to the MongoDB collection model document type using the 'employeeModel'  and then invoking the 'save()' method that saves our new document into the MongoDB collection. Let's add the HTTP Post method to our controller. NestJS_App/src/employee/employee.controller.ts: import { Body, Controller, Get, Post } from '@nestjs/common'; import { EmployeeService } from './employee.service'; import { Employee } from './schema/employee-schema'; @Controller('employe

The main objectives of this article are: Create HTTP Get Endpoint In NestJS Application. Install & Configure React Routing Library In ReactJS Application. Create React Component 'AllEmployee' Install Axios Library Create HTTP Get Endpoint In NestJS Application: In 'EmployeeService' implement logic to fetch data from the MongoDB. NestJS_App/src/employee/employee.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { Employee, EmployeeDocument } from './schema/employee-schema'; @Injectable() export class EmployeeService { constructor( @InjectModel(Employee.name) private employeeModel: Model<EmployeeDocument>, ) {} async getAll() { return await this.employeeModel.find().exec(); } } The 'find()' method fetches all the documents from the MongoDB collection. Let's create a controller like 'EmployeeControll