Spring Boot And Angular Material Full Stack Development

Create a Spring Boot CRUD project from scratch using Spring Initializr, configure Maven, Java 17, dependencies Java Web, Lombok, JPA, and MySQL, and generate and extract the project.

Open the spring boot project in IntelliJ IDEA from the E drive, then trust the project as Maven installs dependencies from the pom.xml (JPA, web, MySQL).

Create and organize a Spring Boot project structure by adding five packages—controller, DTO, entity, repo, and service—within the main Java package, following the standard controller-service-repository data source architecture.

Configure the database for the Spring Boot project by editing application.properties, copy and paste the provided configuration, register the MySQL driver, and set the database name, port, and project name.

Create the BRM database and student table with defined columns, then configure a MySQL data source in IntelliJ IDEA, and run the project to verify successful setup.

Create three student dto classes—student dto, student save dto, and student update dto—with fields id, name, address, mobile, and active, using Lombok to generate constructors and getters/setters for front-end data.

Build DTO classes, then create the student controller, service interface and implementation, and repository to connect the backend with the database using SQL queries.

Implement a Spring Boot rest controller that accepts a student save dto via api/v1, routes data through service to repository, and saves name, address, mobile, and active state.

Implement the add student flow in Spring Boot by wiring the controller to the student service and repository, using an entity and DTO, and exposing a post /save endpoint.

Learn to view student records in a Spring Boot and Angular Material full stack app by exposing a get all students endpoint, mapping entities to DTOs, and validating via Postman.

Learn to edit records in a spring boot app using put mapping, update DTOs, and entity updates, check existence by id, save through the repository, and test with Postman.

Execute a delete operation using a delete mapping with a path variable id to remove a student from the database via service and repository. Validate existence and return a confirmation.

Learn how to implement a get by id endpoint in Spring Boot, using optional, request param, and DTO conversion to return a matching student record to the front end.

Install and configure model mapper in a Spring Boot app to reduce boilerplate; add the dependency, create a config with @Configuration, and expose a model mapper bean.

Learn how to configure and use ModelMapper to convert a student entity to a DTO when locating a record by ID, mapping the optional result for the front end.

Learn how to fetch all student records from the database and map them from entity to a DTO using ModelMapper, including converting lists with TypeToken and getType.

Learn how to implement find by name in a Spring Boot service using ModelMapper to convert a list of student entities to DTOs, with repository, service, and controller updates.

Install node.js from the official site to set up Angular, download the current version, install on the C drive, and verify the version in cmd.

Install Angular CLI on your machine using npm install g Angular CLI, open the command prompt, paste the command, ensure no spaces, wait for installation, and verify success.

Learn how to open an angular project in VS Code by installing VS Code, selecting your operating system, and opening the project folder by running the code . command.

Learn to run an Angular project by installing dependencies with npm, using ng serve to launch the app on localhost:4200, and viewing the welcome page built from the app component.

Edit the Angular project by writing HTML in app.html and applying CSS, then render hello text via app.component.ts to display the styling in the browser.

Apply Angular CSS styles by creating and referencing a component CSS class to color headings and paragraphs, experimenting with red, blue, and navy colors.

Learn to install Angular Material in your Angular project using ng add @angular/material, select the Indigo Pink theme with typography styles and animations enabled, and verify the installation in package.json.

Learn how to add and configure Angular Material buttons by importing the button module, applying the material styles, updating HTML and CSS, and troubleshooting with ng serve.

Learn to implement an angular material card by importing the card module, updating app.module.ts, applying the predefined material css, and embedding the card html in the component to render.

Add an image to the assets/images folder and update the app component HTML to reference assets/images/one.jpg. Then customize the card heading and body text to complete the Angular Material card.

Implement Angular Material UI components, including form fields, cards, and buttons, while creating a new Angular project with the Angular CLI, enabling routing, and opening it in VSCode.

Install Angular Material UI by following the setup, paste the code into the Angular x folder, choose the indigo pink theme with animations, and wait for packages to install.

Create an Angular component named Addnumbers using ng generate component, generate its html, css, and ts files, render it in the app component via its selector, and run project.

Learn to integrate Angular Material components by importing and configuring card, button, input, and form modules in app module to enable a functional design.

Design a material design form inside a card layout with a custom header and CSS. Build mat form fields for number one, number two, and total using ngModel two-way binding.

Design and apply CSS for a custom card, including a blue header with white text, a 24-pixel title, and a full-width, centered form with spaced fields and a button.

Implement the add two numbers logic in an Angular component by declaring number one, number two, and result, binding inputs with ngModel, and displaying the total on button click.

Build a student grade calculation system with three marks, total, average, and grade; compute total as the sum, average as total divided by three, and determine pass or fail.

Build a front-end for a Spring Boot CRUD app using Angular and Angular Material, creating two components: student and header, and wiring them into the project with generated components.

Build a header component with a Bootstrap navbar integrated into an Angular app, style with custom CSS, and implement a student management system interface using Angular Material and Bootstrap.

Apply custom css styles to a navbar by defining a brand class, setting white text, 30px font size, Arial font, and 20px padding, then test the changes.

Design a responsive student form and table in the student component using bootstrap grid (4/8) and angular material inputs, with required module imports and component css.

Design a student form with angular material, css, and bootstrap, including name, address, mobile, and active fields, linked to a spring boot backend with autoincrement id.

Begins table design for the student list inside the card layout, implementing an Angular Material table with pagination by importing the map table module and map pagination module in app.module.ts.

Run the Spring Boot backend, fetch all students via the API, and display them in a material design table with id, student name, address, mobile, and active. Implement pagination.

Configure the http client module and perform a get all students request to load api data into an Angular Material table with a data source and paginator.

Learn how to save records using an Angular form and a Spring Boot API, including building the form, posting JSON data, and validating via Postman.

Learn to update data in a full-stack app by adding an action column with edit and delete buttons, and wiring a form to populate on edit.

Learn to edit existing records by passing a record to an editable form, using an id for update data, calling the update API, and reloading the table.

Learn how a single save button handles both registering and updating student data, with id-based validation and back-end mappings using post, get, and put requests.

Learn to implement delete functionality for student records by wiring a delete button to an http delete call, using the id in the endpoint, and refreshing the table after confirmation.

Learn to implement colorful alert boxes with SweetAlert in an Angular project, including linking the library, showing success messages, and adding delete confirmations with a refreshed data table.

Learn to implement a clear button that resets all form fields. Clear the data table and manage updates and ui styling in an angular material full-stack app.

Build a todo app with Spring Boot and Angular Material UI, defining employee and task entities with properties, and establish a one-to-many relationship where one employee has many tasks.

Create a new spring boot todo app project using spring initializer, configure maven, and set java 17 with dependencies for mysql, jpa, and web.

Open the todo app project in IntelliJ IDEA by extracting the package to the G drive, renaming the backend, and installing dependencies, then access the main Java method.

Configure Spring Boot app by editing application.properties for todo app on port 8075, connect to MySQL database todo app with root 123, and ensure pom.xml includes web, mysql-connector, and jpa.

Learn how to create the core Java packages for a Spring Boot project, including config, controller, service, repo, entity, and dto, step by step.

Create an employee entity class with fields employeeId, employeeName, address, mobile, and activeState; configure @Id, @GeneratedValue, and @Column settings, and generate constructors, getters, setters, and toString.

Create and implement employee dto from the front end in a Spring Boot project, including employee dto, save dto, and update dto, with Lombok and Maven dependencies.

Create an employee controller and its service interface and implementation, wiring a repository to handle employee entities via DTOs and communicate with the database.

Configure the database connection for Spring Boot and Angular Material full stack development app by defining the database name, port, and data source, then test and create or update tables.

Configure the rest controller to receive employee data via DTO format and request body with post mapping, then delegate to a service which saves the employee through a JPA repository.

Front end sends a DTO to the controller, passes through the service and repo, creates an employee entity, and saves name, address, mobile, and active state.

Run the Spring Boot application, test the employee controller save method with postman using JSON data for name, address, mobile, and active, and verify records are saved.

Learn to view employee records from the database by mapping to a dto, implement a get all employees endpoint, and return data through service and repository to the front end.

Update employee records via a put endpoint using a DTO and service, validate ID with the repository, and persist changes, while handling JSON serialization for lazy initialization.

Implement a delete endpoint with a path variable id, verify and delete the employee by id using the service and repository, and handle not-found cases in Spring Boot.

Create the task entity class, annotate with @Entity, define id, taskName, description, and complete fields, map to columns with primary key task_id and identity generation, and plan relationships.

Implement a one-to-many relationship where one employee has many tasks in Spring Boot by configuring the employee with one-to-many mapped by employee and the task with many-to-one join column employee_id.

Create a task controller, define a task service interface and implementation, and build a task repository to enable front-end DTO requests to flow through controller and service to the database.

define the task controller with required annotations, implement save task endpoint, and wire the front end dto through the controller to the task service and repo.

Add a Spring Boot and Angular Material full stack app by sending task data with an employee id and saving it via the task service using dto.

Implement a post mapping to save employees and tasks via postman, then persist data to the database using DTOs to entity conversion, repositories, and Hibernate in a Spring Boot setup.

Learn to fetch all tasks from the database and expose them to the front end using a get mapping, entity to dto transformation, and a task dto.

Update a task via a put /update endpoint using a task update DTO, verify the task exists by id, map changes to the entity, and save via the task repository.

Implement the delete task endpoint in Spring Boot and Angular Material, validate the id, delete by id via the task repository, and return a boolean or not found message.

Install the angular CLI, create a new front-end project with standalone components and SCSS, and install packages to complete the frontend setup.

Open the angular project in VSCode using the terminal and the code dot command, then run ng to start the project and view the home page on the running port.

Create two Angular components, employee and task, in the src/app folder using ng generate component for an Angular 17 project.

Explore how to install angular material and style integration in your project by running ng add angular material, placing styles in the app folder, and selecting indigo pink with animations.

Clean the app component by keeping only the root outlet and ensuring the default page renders. Add a bootstrap four navbar with links to employee and task components in src/app.

Finalize the navbar section by structuring the layout with bootstrap grid rows and md 12, and implement a route outlet to load employee or task components on navigation.

Create a student component with a two-column layout, designing a bootstrap form and a table, and implement angular material form fields with mat input modules, with component css styling.

Design and implement full-width forms in a Spring Boot and Angular Material full stack app by wiring components, applying reusable styles, and refining mat form fields for the employee form.

Design an Angular Material form with fields for employee name, address, mobile, and an active state dropdown, then add a save button and css styling.

Develop a paginated employee table in Angular Material by implementing HTML and TypeScript, configuring display columns (employee id, name, address, mobile, active state), and wiring pagination in app module.

Implement the get all employees API, load data into an Angular Material table with pagination, configure http client, and define columns: employee id, name, address, mobile, active, edit and delete.

Declare form variables for employee records, including name, address, mobile, and active state. Set up the current employee id and autoincrement logic to enable adding and updating records.

Bind employee name, address, and mobile to input fields with ngModel, and import FormsModule in app.module.ts to enable ngModelOptions standalone true for active state binding.

The lecture demonstrates adding an employee via a form, posting the form data to the backend with http post, and refreshing the employee table to show the new record.

Learn to edit employee records in a Spring Boot and Angular Material full stack app by wiring table rows to a form, updating data, and clearing fields after save.

Implement edit functionality by passing selected data via an active state, toggling true or false, and binding it to the form with a select data method in the employee component.

Implement validation for save and update of employee records, handle existing vs new IDs, and refresh the table while clearing the form after edits.

Learn to implement the delete operation for employee records in a Spring Boot and Angular Material full stack app, using an id-based http delete and refreshing the table.

Install and integrate sweet alert 2 in an Angular Spring Boot full stack app, set up delete confirmations, and display success messages such as employee has been saved or updated.

Design a task form by adapting the employee component HTML, introducing fields for task name, description, completion status, and an employee dropdown, plus save and clear actions for creating tasks.

Design the task table and form, outlining fields such as task id, task name, description, complete, and employee, with edit, delete, view, and pagination in the backend api.

Define and bind task form fields, including task name, description, complete, and employee ID, using variables and ngModel, then post to the Spring Boot backend.

Set up a paginated task table in Angular Material. Align display columns with get all function, implement the data source, and add edit and delete actions showing the employee name.

Set up Angular routes by replacing HTML links with routerLink, define paths for employee and task, connect them to their respective components, and configure the router outlet for navigation.

Load employee data into a dropdown list in an Angular task component by fetching employees via HTTP client, populating an array, and binding employee id and name to the dropdown.

Load employee data into a material select dropdown using an ngfor loop and mat-option in Angular, binding employee name and handling click events to edit data via an API.

Implement a task save flow in a Spring Boot and Angular full stack, wiring a form to post task name, description, complete, and employee ID with dropdown selection and validation.

Learn how to edit a task record by wiring the edit button to populate a form, set update data, and save changes to task name, description, completion, and employee details.

learn to edit and update tasks by wiring the front end to a Spring Boot back end via a put API, mapping task id, name, description, complete, and employee id.

Implement save and update functionality in the Angular task component with validation based on the current ID, using register for new records and update for existing ones.

Implement the delete feature by wiring the delete button to pass the selected task ID to the spring boot delete API with confirmation, updating the task table after removal.

Explains how to implement a clear button in the task component, wiring a click event to a clear method that empties all fields and resets the form.