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 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 '