DEV Community: Chetan

Car Rental App

Chetan — Mon, 09 Jun 2025 13:19:44 +0000

A Car Rental App is a digital platform that allows users to search for, book, and rent vehicles for a specified period. It streamlines the car rental process by offering an easy-to-use interface for both customers and rental service providers. Key features of a typical Car Rental App include:

Vehicle Listings: Users can browse a wide variety of available vehicles based on type (sedans, SUVs, luxury cars, etc.), location, and rental duration.
Search & Filters: Users can search for cars by price range, availability, brand, and specifications.
Booking & Reservations: The app allows users to book cars in advance, with options for hourly, daily, or long-term rentals.
Pricing & Payment: It offers transparent pricing with flexible payment options, including credit cards, mobile payments, or even cash on delivery.
Location Tracking: Users can pick up and drop off vehicles at various locations, with GPS-enabled maps to help them find rental spots or delivery locations.
Customer Reviews & Ratings: Renters can read reviews and ratings from previous customers to choose the best service.
Account Management: Users can create profiles, track their rental history, manage bookings, and access customer support.
Insurance & Policies: The app provides information on rental policies, insurance options, and damage coverage.

Examples of such apps include Turo, Enterprise, and Hertz. A Car Rental App offers convenience for users to rent cars easily and for rental companies to manage bookings and fleet availability efficiently.

Car Rental App in angular 17 with API.
Angular 17 + Bootstrap + API.
Car Booking Project Angular 17

Car Rental App Major Modules
1) Car Creation
2) Bookings
3) Dashboard
4) Login

Live Version
https://voidchetan.github.io/car_renting_app_angular17/

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Angular Interview Question
https://voidchetan.github.io/interview_question_app_angular_17/home

Learn From me
angularacademy.in

Connect With Me
https://chat.whatsapp.com/BcKALY2eGabEzp2GSkpWBP

You can find Html Template Code on GitHub
https://github.com/voidChetan

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

🚗 Build a Real-World Parking Management System in Angular

Chetan — Thu, 15 May 2025 03:59:48 +0000

Are you an Angular developer looking for a real-world project to sharpen your skills and boost your portfolio? In this step-by-step YouTube tutorial, I walk you through building a complete Parking Management System using Angular — packed with features like real-time spot reservation, live availability updates, and powerful CRUD operations.
Whether you’re a beginner looking to learn how things work in a real-world Angular app or an experienced developer exploring new project ideas, this is the perfect resource for you.

👉 Watch the Full Tutorial on YouTube:
Parking Management System in Angular 🚘 | Reserve, Book, and Track Spots

Live Version: https://learningpartner.github.io/parking_management_system_angular

🌟 Project Overview
This Parking Management System is designed as a multi-customer product. That means different clients (e.g., malls, corporate offices, residential apartments) can use this system independently to manage their parking operations.

🎯 Key Features
✅ Real-time Parking Spot Reservation
✅ Live Availability Tracking
✅ User-Friendly Booking Interface
✅ Admin Panel for Parking Slot Management
✅ Complete CRUD Functionality (Create, Read, Update, Delete)
✅ Angular Routing, Services, Reactive Forms
✅ Clean UI with Dynamic Components

🔧 Tech Stack

Frontend: Angular 19+
Backend (Coming Soon): .NET Core APIs
Database: SQL Server
Tools Used: VS Code, Postman, Bootstrap

📌 Real-World Use Case

This project simulates a real-world SaaS-based product that multiple clients can subscribe to and use to manage their parking lots. Each customer can:

Set up their parking layout
Monitor current availability
Accept or reject reservations
Analyze booking history

Perfect for showcasing multi-tenancy principles and modular UI design.

👨‍💻 What You'll Learn

How to build scalable components in Angular
How to manage state and services efficiently
Real-time data binding and conditional UI rendering
How to organize a full Angular project for real-world scenarios
Best practices for maintainable and readable code

🎥 Watch the Full Tutorial
👉 Click here to watch the full video on YouTube
🚀 Don't forget to subscribe and hit the bell icon to get notified when I upload more real-world Angular projects!

💬 Let’s Connect!
If you find this helpful, drop a comment on the video, like it, and share it with your developer friends!
I'm also active on:

LinkedIn: https://www.linkedin.com/in/chetan-jogi-a87148ba
WhatsApp: https://chat.whatsapp.com/HzoUm2FMQ6Z2oV2Hb9nuxQ

Ticketing Tool App

Chetan — Sun, 04 May 2025 16:49:17 +0000

A Ticketing Tool App is a software application designed to manage and streamline the process of creating, tracking, and resolving issues or tasks. It is widely used in industries like IT support, customer service, and project management to handle user requests, incidents, or tasks efficiently. Here are its key features:

Ticket Creation: Users or customers can submit issues, which are logged as "tickets" in the system.
Ticket Assignment: Tickets can be assigned to specific agents or teams for resolution.
Prioritization & Categorization: Issues are categorized and prioritized based on urgency or impact.
Tracking & Notifications: Users and agents can track the status of a ticket, receiving updates as it progresses.
Resolution & Closure: Once an issue is resolved, the ticket is closed, and the solution may be logged for future reference.
Reporting & Analytics: Metrics like response time, resolution time, and ticket volume can be tracked for performance monitoring.

Ticketing tools enhance workflow efficiency by ensuring tasks are handled systematically and transparently. Examples include JIRA, Zendesk, and ServiceNow.

In this video I have explained how Does ticket tool works.
From scratch I have Created Project API are Developed in Dot Net Core + Angular 18.
New Features from angular 17 to 18 I have used in Project. | angular real time projects

Project Flow Diagram
https://lucid.app/lucidchart/37bf3ad8-7690-4228-a158-0c7fe0b8b7dc/edit?page=0_0#

Live Version
https://voidchetan.github.io/ticket_tool_angular_18

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Major Modules are as follows
Employee Creation.
Department Creation.
Category n Sub Category.
Login Page.
Ticket Creation.
Ticket Assignment.
Different State of Ticket.
Role Based Login.

Learn From me
angularacademy.in

Connect With Me
https://chat.whatsapp.com/GmByxyjIEMg6pP4aqmKdP1

Code Available at
https://github.com/voidChetan

API used
https://freeapi.miniprojectideas.com

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Train Ticket Booking App Agular

Chetan — Sat, 12 Oct 2024 11:02:11 +0000

A Train Ticket Booking App is a digital platform that allows users to search, book, and manage train tickets for their journeys. Key features typically include:

Search and Schedule: Users can search for trains by entering departure and destination locations, travel dates, and preferences (class, type of train, etc.).

Seat Availability: The app shows real-time seat availability for different classes (e.g., economy, sleeper, first class).
Booking and Payment: Users can select trains, choose seats, and complete bookings through secure payment gateways.
PNR and Ticket Management: Provides a unique Passenger Name Record (PNR) and allows users to view, download, and cancel their tickets.
Train Status: Real-time tracking of train schedules, delays, and platform information.
User Profiles: Enables users to store personal details for faster booking, view booking history, and manage upcoming trips.
Notifications: Sends alerts for booking confirmation, train delays, and other updates.

This app simplifies the process of booking train tickets and managing travel plans, offering convenience and time-saving benefits for passengers.

Train ticket booking system, train booking system
In this Video I have covered flow of Train Ticket Booking with Real API integration.
Project is from scratch just UI is already created which is available in my GitHub.

Major Modules Covered as below
1) Home Page to Search Train with from n to destination with
Travel Date
2) Show Available Result Of Trains
3) Registration & Login.
4) Booking Of Tickets.

Live Version
https://voidchetan.github.io/train_booking_app_angular

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Learn From me
angularacademy.in

Html Template Used
https://github.com/voidChetan/youTube_project_html_templates

Check Ecommerce Application Video
https://youtu.be/pWx-Ot0ydLg

Check Zomato Application Video
https://youtu.be/5ttHN3XemKo

*API Used : *
https://freeapi.miniprojectideas.com

You can find Html Template Code on GitHub
https://github.com/voidChetan

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Event Booking App Angular

Chetan — Fri, 11 Oct 2024 13:51:08 +0000

An event booking app is a digital platform that allows users to browse, select, and reserve tickets for various events, such as concerts, workshops, conferences, and sports matches. The app typically offers features like.

Event Listings: Users can browse upcoming events by categories, dates, or locations.
Event Details: Each event page provides information like venue, time, description, pricing, and seat availability.

Event Booking app in angular, Event Booking website.

In this Video I have covered Basic flow of Event Booking application with Real API integration.

Major Modules Covered as below
Website
Home Page = Show All events
Event Page = Show Single Event with Book Button
Register & Login = Model popup
Booking = Book Tickets in Model Popup
My Booking = Show Booking Done By Logged User

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Learn From me
angularacademy.in

Html Template Used
https://github.com/voidChetan/youTube_project_html_templates

Check Ecommerce Application Video
https://youtu.be/pWx-Ot0ydLg

Check Zomato Application Video
https://youtu.be/5ttHN3XemKo

Follow on WhatsApp channels
https://whatsapp.com/channel/0029Va5FtWpATRSlwWT40g1C

API Used : https://freeapi.miniprojectideas.com

You can find Code on GitHub
https://github.com/voidChetan

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Property Booking App Angular

Chetan — Thu, 10 Oct 2024 08:25:48 +0000

A Property Booking App is a web application designed to simplify the process of searching for, booking, and managing property listings for real estate transactions.

A Property Booking App is a web-based platform that allows users to explore, select, and book properties for purchase, lease, or rent. The app typically includes features like:

Property Listings: Display available properties with details like location, property type (e.g., residential, commercial), price, and features (e.g., area, amenities).
Search and Filters: Users can search for properties based on various filters such as city, property type, price range, and availability.
Booking System: Allows users to make property reservations by selecting a property and submitting a booking request.
Customer and Property Management: Administrators can manage property listings, customer details, and booking statuses.
Map Integration: For easier location viewing, some apps integrate maps to display property locations.
Payment Gateway: Secure payment options for completing bookings or deposits.
This app enhances the efficiency of property bookings, making it convenient for both customers and property managers.

In this video I have Created Property Management software using Angular 18. Complete Project from Scratch with API integration.
Angular 18 New Features Covered.
All Advance concepts covered.

Live Version
https://voidchetan.github.io/property_booking_App_angular18

Complete Angular 18 tutorial In Hindi Playlist
https://www.youtube.com/playlist?list=PL7JmcZV0UQtUxsHS8dF3EINHdoIvRS6Ft

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Angular Interview Question
https://voidchetan.github.io/interview_question_app_angular_17/home

Learn From me
angularacademy.in

You can find Html Template Code on GitHub
https://github.com/voidChetan

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Bus Ticket Booking App Angular

Chetan — Wed, 09 Oct 2024 11:54:28 +0000

Bus Ticket booking system, Bus Ticket booking Project
In this Video I have covered flow of Bus Ticket Booking with Real API integration. Just Website Part I have covered in this video
Project is from scratch just UI is already created which is available in my GitHub.

Following are the Project Modules I have covered
Website Module
Search Page
Bus Selection
Bus Ticket Selection
Book Ticket
These Module I will Cover in separate Video
Admin Module
Vendor Crud
Location & address Crud
Bus Schedule Crud
Booking

Check Out Live Project Version
https://voidchetan.github.io/bus-booking-angular-18/search

Html Template Used
https://github.com/voidChetan/youTube_project_html_templates

API Used :
https://freeapi.miniprojectideas.com

You can find Html Template Code on GitHub
https://github.com/voidChetan

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Bank Loan Application App Angular

Chetan — Tue, 08 Oct 2024 09:10:15 +0000

A Bank Loan Application is a web application designed to automate the process of applying for and managing bank loans. It offers a user-friendly interface for both customers and bank administrators, providing the following key features.

Bank Loan Application.
An application from where customer can apply for a bank loan. A Simple angular machine test task suggested by one of subscriber so I created a basic API for it and complete angular par as well.

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Html Template Used
https://github.com/voidChetan/youTube_project_html_templates

Check Ecommerce Application Video
https://youtu.be/pWx-Ot0ydLg

Check Zomato Application Video
https://youtu.be/5ttHN3XemKo

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Employee Management System in Angular 18

Chetan — Mon, 07 Oct 2024 11:13:20 +0000

An Employee Management System is a web application designed to manage an organization's workforce efficiently. It provides features to handle various employee-related operations such as:

Employee Records Management: Add, edit, view, and delete employee details like name, contact information, department, and role.
Leave Management: Track employee leave requests, approve/reject leave applications, and maintain a leave balance.

The system is designed for ease of use, promoting better workflow and productivity in the organization. It also helps HR teams streamline administrative tasks, ensuring quick access to employee data.

In this video We are going to complete Employee Management Project in angular 18. We will complete this project with API integration.

Live Version: https://voidchetan.github.io/employee_management_app_angular18/login

Following Modules Completed

Login

Dashboard

Employee Portal

Project Portal

Employee Project Assignment

Topic Used: Reactive Form, Template Form, Control Flow Statement, Service, API integration, Routing, Signal

API: https://projectapi.gerasim.in/index.html

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Mini Project Ideas Portal
https://miniprojectideas.com

You can find Html Template Code on GitHub
https://github.com/voidChetan

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

Visit YouTube Channel
https://www.youtube.com/@LearningPartnerDigital

How to Host an Angular Project on GitHub Pages

Chetan — Thu, 29 Aug 2024 05:00:09 +0000

Hosting your Angular project on GitHub Pages is a straightforward and efficient way to showcase your work, share it with others, or even run demos. GitHub Pages is a free service provided by GitHub to host static websites directly from a repository. This guide will walk you through the steps to deploy your Angular application to GitHub Pages.

Prerequisites
Before we start, make sure you have the following:

Node.js and npm installed on your system.
Angular CLI installed globally (npm install -g @angular/cli).
A GitHub account.
A GitHub repository created for your project.

Step 1: Create or Prepare Your Angular Project

If you already have an Angular project, you can skip this step. Otherwise, create a new Angular project using the Angular CLI:

ng new my-angular-app
cd my-angular-app

This command creates a new Angular project named my-angular-app. Navigate to the project directory after it's created.

Step 2: Install Angular CLI GitHub Pages Deployment Tool

Angular has a handy deployment tool that allows us to deploy the application to GitHub Pages easily. Install the angular-cli-ghpages package globally using npm:

npm install -g angular-cli-ghpages

Step 3: Build the Project
To deploy the Angular project to GitHub Pages, you first need to create a production build of the project. This step compiles the application and prepares it for deployment.

Run the following command to build your project:

ng build --prod --base-href "https://<your-username>.github.io/<your-repo-name>/"

Replace with your GitHub username and with the name of your GitHub repository. For example:

ng build --prod --base-href "https://johnDoe.github.io/my-angular-app/"

This command creates a production build in the dist/my-angular-app folder. The --base-href flag sets the base URL for the application, which is necessary for GitHub Pages to serve your app correctly.

Step 4: Deploy to GitHub Pages
Now that your application is built, it's time to deploy it to GitHub Pages using the angular-cli-ghpages tool. Run the following command:

ng build --base-href "https://johnDoe.github.io/my-angular-app/"

This command deploys the contents of the dist/my-angular-app directory to the gh-pages branch of your GitHub repository, which GitHub Pages uses to serve your site.

If you're doing this for the first time, the gh-pages branch will be created automatically.

Step 5: Verify the Deployment
Once the deployment is complete, you can visit your GitHub Pages URL to see your Angular application live. The URL will be:

https://<your-username>.github.io/<your-repo-name>/

Using the previous example, it would be:

https://johnDoe.github.io/my-angular-app/

How to Implement Microfrontend Architecture in Angular

Chetan — Mon, 26 Aug 2024 13:00:05 +0000

In modern web development, the trend towards building large-scale applications has increased significantly. This has led to the emergence of the Microfrontend architecture, which helps manage and scale frontend projects effectively. In this blog, we'll explore what Microfrontend architecture is, why it's beneficial, and how you can implement it in an Angular application.

What is Microfrontend Architecture?
Microfrontend architecture is an architectural style where a web application is divided into multiple smaller, self-contained, and independently deployable frontend applications. Each frontend application (or microfrontend) is responsible for a specific part of the overall functionality. They can be developed, tested, and deployed independently while still working seamlessly together in a single unified user interface.

Benefits of Microfrontend Architecture

Scalability: Each team can work on different parts of the frontend without causing conflicts. This allows scaling both the team and the application efficiently.
Independent Deployments: Changes to a specific microfrontend can be deployed independently, without needing to redeploy the entire application.
Technology Agnostic: Different microfrontends can use different technologies. For example, one part of the application could be in Angular, while another could be in React.
Improved Maintainability: Smaller codebases are easier to maintain and refactor, improving the overall health of the project.

Implementing Microfrontend Architecture in Angular
To implement Microfrontend architecture in Angular, we will use Webpack Module Federation. Webpack Module Federation allows you to share and load code between different Angular applications (or any JavaScript applications), making it easier to split your application into microfrontends.

Let's go through the steps to set up a simple microfrontend architecture using Angular.

Prerequisites
1. Node.js and npm installed
2. Angular CLI installed
3. Basic understanding of Angular and Webpack

Setting Up the Project
We'll create two Angular applications: a host (container) application and a remote (microfrontend) application.

Step 1: Create the Host Application

ng new host-app --routing --style=scss
cd host-app

Step 2: Create the Remote Application

ng new remote-app --routing --style=scss
cd remote-app

Next, create the remote application:

ng new remote-app --routing --style=scss
cd remote-app

Configuring Webpack Module Federation To use Webpack Module Federation, we need to modify the Webpack configuration for both applications. We'll use @angular-architects/module-federation to simplify the setup.

Step 1: Install Module Federation Plugin

npm install @angular-architects/module-federation --save-dev

Step 2: Configure the Host Application
In the host-app directory, run the following command to generate the Module Federation configuration:

ng add @angular-architects/module-federation --project host-app

This command will create a webpack.config.js file with the basic configuration. Edit the webpack.config.js file to set up the Module Federation:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
    remotes: {
        // This is where the remote app is registered
        "remoteApp": "remoteApp@http://localhost:4201/remoteEntry.js",
    },
    shared: {
        ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    },
});

Step 3: Configure the Remote Application
Similarly, in the remote-app directory, run the following command:

ng add @angular-architects/module-federation --project remote-app

Edit the webpack.config.js file generated for the remote application:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({
    name: 'remoteApp',
    filename: 'remoteEntry.js', // Name of the remote entry file
    exposes: {
        './Component': './src/app/app.component.ts', // Exposing the AppComponent
    },
    shared: {
        ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    },
});

Updating Angular Module Configuration Step 1: Update the Host Application Routes In the host-app, open app-routing.module.ts and add a route to load the remote component:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'remote',
    loadChildren: () =>
      import('remoteApp/Component').then((m) => m.AppComponent),
  },
  { path: '', redirectTo: '/remote', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Running the Applications

Start the remote application first to ensure the exposed module is available:

cd remote-app
ng serve --port 4201

Next, start the host application:

cd host-app
ng serve --port 4200

Now, navigate to http://localhost:4200/remote, and you should see the content of the remote application's AppComponent loaded within the host application.

Angular: Build your own Context Menu

Chetan — Tue, 17 May 2022 16:39:04 +0000

Quite an amazing topic and much needed in large scale application.
Every developer has somehow used html Tables to display records and might have used action buttons like Edit, View or download and list goes on and everyone must have felt that these buttons occupy so much space.

So Here comes a solution Context Menu.
Instead of button you can have a context menu and can have as many as actions to perform without disturbing UI design.

With Context Menu now we have more space to show other information in grid and for user also easy to get action item on right click.
Following are the steps to achieve above Context-Menu

context menu html a simple div with css to be visible where user will click right click div will be visible as popup. Here You can have all your action items. Here rightPanelStyle is dynamic style which will be added on right click event.

<div id="contextmenu" class="contextmenu" [ngStyle]="rightPanelStyle" 
    (clickOutside)="closeContextMenu()" (mouseleave)="closeContextMenu()">
    <ul class="menu">
        <li (click)="edit()"><a><i class="fa fa-eye"></i> View</a></li>
        <li class="activem"><a><i class="fa fa-pencil-square-o"></i> Edit</a></li>
        <li><a><i class="fa fa-download"></i> Download</a></li>
        <li (click)="delete()"><a><i class="fa fa-trash"></i> Delete</a></li>
    </ul>
</div>

some css to make it look like context menu.

.menu {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
    padding: 10px 0;
  }
  .menu > li > a {
    cursor: pointer;
    font: inherit;
    border: 0;
    padding: 10px 30px 10px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: unset;
    color: #000;
    font-weight: 500;
    transition: 0.5s linear;
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -ms-transition: 0.5s linear;
    -o-transition: 0.5s linear;
  }
  .menu > li > a:hover {
    background:#b1b3b6;
    color: #4b00ff;
  }
  .menu > li > a > i {
    padding-right: 10px;
  }
  .menu > li.trash > a:hover { 
    background:#b1b3b6;
  }

code you need in .ts file

rightPanelStyle: any = {};
detectRightMouseClick($event,user) { 
    if ($event.which === 3) { 
      this.rightPanelStyle = { 'display': 'block', 'position': 'absolute', 'left.px': $event.clientX, 'top.px': $event.clientY };
      this.currentRecord = user;
      return false;
    } 
    return true;
  }
  closeContextMenu() { 
     this.rightPanelStyle = { 'display': 'none' }; 
  }

then finally on td of your table you need to invoke detectRightMouseClick function like below.

<td (mouseup)="detectRightMouseClick($event,item)">{{item.name}}</td>

here item is ngFor instance to pass it on to function and with $event you get JavaScript event that will get you mouse click position form top and left.

One more thing you might want to disable browser right click.
otherwise there will be two context menu. you can add this to parent div of table.

<div oncontextmenu="return false;">

and you need to call closeContextMenu in ngOnInit to close context menu on load.

Hope you might have learned few new things.
in case you need to see while code from scratch and thought process Please watch youtube video
youTube Link

and do drop comments to here from me with such amazing life saving post....