Full Stack + Angular 18 Material + Spring Boot + MongoDB
In this Video, We will be building a Full Stack project for Product system in which we'll use Angular 18 as a Frontend and Spring Boot 3 as Backend and MongoDB as a Database.
We will first create one database and collection on MongoDB Database side using MongoDB Compass tool which is user interface for creating database and collection for MongoDB database.
Our database will store product related documents in products collection.
On the backend side We are going to create Backend application using Spring Boot and implement all the CRUD functionality using Rest API.
We will also test our Rest API's using Postman and verify results in database side.
On the frontend side we are going to create our angular standalone application using version angular 18 and install angular material library for creating material table.
Next we will create required components like module,service, component and interface using ng generate command.
We can create proxy configuration in angular so that our angular application will communicate with backend application which is running on different port.
Next we will add routing logic so that It will navigate to home component.
We will create angular material table and populate it with columns and data.
We will implement all the http methods like get, post, put and delete using HttpClient provider in service component.
We will implement GetMapping method and render returned data in our Material Table.
Next we will implement searching (filter), sorting and pagination functionality with the help of angular material library and apply it on table data to confirm these functionalities are working as expected.
We can intgrate our get api data and show returned data on home page along with action buttons like edit and delete on table in html page.
Next we will use Mat From Fields and Input Material controls to capture data in input fields and submit the same on click of submit button.
Similar way we can populate Form fields with data on click of edit button in table and update modified data into MongoDB database on click of submit button.
Finally, To remove product from table We will implement delete functionality as a part of CRUD Operations.
Full Stack + Angular 18 Material + Spring Boot + MongoDB
Full Stack + Angular 18 + Spring Boot + MongoDB
Full Stack with Angular 18 Spring Boot & MongoDB
Full Stack with Angular 18 and Spring Boot 3
Full Stack Web Development
angular full stack project
Full Stack with Angular 18 standalone and Spring Boot 3
angular 18 standalone with spring boot
Full web application | Spring boot | Angular
Full web application | Spring boot 3| Angular 18
Angular + Spring Boot CRUD Full Stack Application
FULL STACK APPLICATION SPRING BOOT 3 || ANGULAR 18 || MongoDB
Full Stack Spring Boot 3 API with Angular 18
Angular 18 + Spring Boot + MongoDB
Full Stack Project with Spring Boot, Angular, and MongoDB
Full Stack Project with Spring Boot 3, Angular 18, and MongoDB
Angular + Spring Boot + MongoDB CRUD Tutorial
Full Stack + Angular + Spring Boot + MongoDB
Full Stack + Angular 18 + Spring Boot 3 + MongoDB
Angular + Spring Boot + MongoDB
Angular + Spring Boot
Full Stack + Angular + Spring Boot + MongoDB CRUD Tutorial
Angular projects for beginners
Angular projects with Visual Studio code tutorial
full stack web development course
full stack project
full stack project with Angular and Spring Boot
full stack
Timecodes
0:00 | Introduction
2:47 | Architecture
5:10 | User interface demo
8:48 | mongodb create database
9:56 | spring boot project
12:51 | MongoDB spring boot
14:43 | spring boot packages
15:55 | spring data mongodb document
17:00 | springboot repository
17:55 | rest get
24:05 | rest get by Id
24:50 | rest api post
26:30 | rest api put
31:00 | rest api delete
36:57 | auto increment in mongodb
57:30 | postman Api testing
1:02:04 | create an angular project
1:05:41 | proxy configuration in Angular
1:08:11 | angular material
1:09:30 | angular generate component
1:13:01 | angular routing
1:14:28 | angular home component
1:25:31 | table mat table
1:30:13 | angular http get example
1:35:53 | angular filter
1:45:36 | mat sort
1:48:34 | paginator | pagination
1:51:22 | CSS style table
1:52:17 | angular http post
1:59:29 | action button | edit delete action button
2:01:21 | angular http put
2:06:00 | angular http delete
#fullstack #angular #springboot #angular18 #mongodb #codefortechsolutions