Angular and NestJS: A Practical Guide with Docker

Install the latest NestJS, create a new project with nest new, name it nest admin, then start the server and view the running app at localhost:3000.

Set up a NestJS app with docker by creating a Dockerfile and docker-compose.yml, installing dependencies with npm, and wiring a MySQL database with volumes and port mappings for local development.

Create a new user model and controller in Nest, configure the hello endpoint, and expose a /users get endpoint that returns a users array via the service.

Configure a docker database, adjust docker-compose ports, and verify the connection. Create a user entity with a primary key and unique email for the users table via migrations.

Create and inject a user service in NestJS to query all users from the database, returning an array and wiring it to the user controller for display.

Register users by building a controller and model, expose a post /register endpoint, and apply a global api prefix so all endpoints use /api.

Register users with a new user service create method, fix circular dependencies by providing the user service in the OS module, and verify database persistence with generated IDs.

Hash passwords securely by using a TypeScript decrypt library to hash a new user's password during registration, with cross-platform fixes verified in logs.

Enable register validations with a RegisterDto (first name, last name, email, password, password confirm) using class-validator for not empty and email, plus a password match check and ValidationPipe with class-transformer.

Implement a login endpoint as a post request sending email and password, fetch user by email, verify the password against the stored hash, and handle not found or invalid credentials.

Generate and sign a JWT, set a payload with user id, and secure it as an http-only cookie to authenticate and retrieve the user in a NestJS and Angular workflow.

Fetch the authenticated user by reading the JWT from cookies, verify it with the JWT service, and return the user data; set the frontend origin and cookies for requests.

Use a serializer interceptor in NestJS to remove the password property from every user response by leveraging the excluded password field in the user entity, ensuring the password never returns.

Implement a logout function that posts to clear the cookie and JWT, returns a success message, and fixes issues like missing cookies, passthrough, and guarding the user route.

Create and apply guards for authorization, protecting user and logout routes by validating a JWT from cookies via a guard; return true on valid token, otherwise false.

Add a post method to the user model to create users, and define a user create detail with first name, last name, email, and password, then validate inputs.

Share the jwt model across controllers by creating a common module, import and export the jwt model in user and oauth modules, and verify access after login.

Learn to implement a full user rest API: fetch all, create, get by id, update via put with optional fields, and delete a user.

Learn to implement pagination in an Angular and NestJS app by fetching a paged user list with take and skip, returning total, current page, and last page while omitting password.

Create a roles module in NestJS with a role entity and repository. Expose a controller and service implementing get all, create, update, and delete roles.

Define a many-to-one relation from users to roles by adding role as a foreign key on the user with a join column, and demonstrate creating and assigning roles.

Create the permission entity, controller, and service, wiring a permissions repository to fetch all permissions. Prepare for linking permissions with roles via a future many-to-many relationship.

Explore implementing many-to-many relations with a join table between urls and permissions, including cascading deletes, and manage roles with a permissions array during create and update, plus loading related permissions.

Centralize common create, read, update, and delete operations with a generic abstract service. Extend other services, enable pagination, load optional relations, and remove passwords from user data.

Learn to implement authenticated user updates in a NestJS and Angular project, handling put requests to update first name and last name, while resolving circular dependencies with forwardRef and JWT.

Build a complete product module with NestJS, including a product entity, repository-backed service, and a controller that implements create, read, update, and delete operations with pagination.

Learn to implement an image upload endpoint in NestJS with a file interceptor and disk storage, save to an uploads folder, and serve the image via URL.

Build a practical orders module by modeling order items as an entity with a one-to-many relation to orders, including a created at column, a guarded endpoint, and a service.

expose computed fields in NestJS by exposing a name from first name and last name, and expose a total from order items using reduce; connect via the class serializer interceptor.

Export orders via a post request to a csv file named orders.csv using express response and a json-to-csv package, including headers order id, name, email, product title, price, quantity.

Add an endpoint to generate a sales chart by querying orders joined with order items, summing price times quantity by date, grouped by date with a date cast.

Explore building a permissions system in NestJS with a custom has permission decorator and a permission guard, using Reflector metadata to enforce role-based access across controllers.

Implement a role-based access guard in NestJS by loading the authenticated user, their role, and permissions via multiple services, and enforce access with JWT verification and route-specific rules.

Install Angular and create a new project with routing, then run ng serve to start the local server and view the app in the browser.

Create and modify Angular components by integrating a Bootstrap email template, building a dashboard layout, and applying the up prefix for component usage while refining navigation and the menu component.

Create and organize Angular components using schematics, grouping them into public and secure models, with automatic module updates. Prepare for routing in the next tutorial.

Configure Angular routes by creating login and register components, then define them as child routes under a public parent with a router outlet to render the appropriate view.

Demonstrates building a register form with Angular, using two approaches to submit: regular forms and reactive forms. Shows configuring variables and two-way binding with ngModel for submission.

Use HttpClient in Angular to post registration data to the api/register endpoint, configure the base URL with environment variables, and redirect to the login page after a successful response.

Build login form with reactive forms, using a form group for email and password. Call the backend with the form values, receive a JWT cookie, and navigate to the dashboard.

Learn to build a dedicated authentication service in Angular using an injectable http client, with login and register methods, routing endpoints, and with credentials for protected requests.

Fetch the authenticated user from the user endpoint using credentials, subscribe to the response, and display the first name and last name in the navigation.

Create a typed user interface and a role interface with id and name. Import and apply these types to observables and responses to ensure accurate user data and JWT handling.

Implement logout by posting to logout via the out service, subscribing to the void response, and handling redirection to login when unauthenticated in the secure guard.

Learn to fetch authenticated user in a secure component, handle success and error, redirect unauthenticated users to login, and pass the user as input to child components to avoid duplicates.

Use Angular HTTP interceptors to automatically attach with credentials to every request, by implementing a credential interceptor and registering it as an HTTP_INTERCEPTORS provider.

Explore building a profile page in an Angular and NestJS app, with a profile component and dashboard, using reactive forms to update user info and password via service calls.

Master event emitters to share the authenticated user between the secure and profile components, subscribe to updates, and patch reactive forms while coordinating navigation.

Generate a users component, add it to the menu, and implement router links with an active state, plus redirect the empty path to the dashboard.

Fetch the user list from the backend via a user service endpoint, wiring the users component to subscribe to the service, and display name, email, role, and actions with pagination.

Implement pagination for the users list with next and previous buttons, pass a page parameter to the endpoint, manage page state with page and lastPage variables, and guard against overflow.

Add a delete button to remove a user by id, with a confirmation prompt and a delete function in the user service, then filter the list to reflect the removal.

Develop a users create page in Angular by adding a component, wiring routing, and building a form with form group and form builder for first name, last name, and email.

Learn to fetch roles and populate the form, then create users via the user service and navigate to the users page on success.

Learn how to update users by creating a user edit component that prefill data from the server and submits updates via the user service.

Leverage abstract classes to automatically implement the five rest methods across models by extending a base rest service, sharing endpoints and page handling in Angular and NestJS.

Implement a roles management feature by creating a roles component, fetching and displaying a list of roles, and enabling delete with confirmation in an Angular and NestJS app.

Create a role creation form by building a role-create component and a form group using a form builder to fetch permissions from a permissions service and show checkboxes.

Learn to implement a reactive form array for user permissions, building form groups with checkboxes, filtering true values, mapping IDs, and submitting to a server via a service.

Edit roles by building a role edit component, loading existing role data, mapping permissions, and patching updates through the service. Then navigate back to the roles page to confirm changes.

Create the products component and interface, fetch and display products with images, titles, and prices, enable routing to details and creation, and implement delete and pagination with a product service.

creates a reusable paginator component in Angular, adds input for last page, and emits a pageChanged event to reload products or users when the page changes.

Create a product using an Angular form in a product create component, defining a form group with a form builder for title, description, image, and price, and navigate to products.

Learn to implement image uploads in a product flow by handling file input, form data submission, and server upload with an event-driven image url integration into the product form.

Create and edit a product using a dedicated component, bind a form, subscribe to the product service for retrieval, and update the product before navigating back to the products list.

Create an orders feature: add orders component, build an order service with a rest endpoint, and define order and order item interfaces, including pagination and a view button.

Learn to display order items inline by adding a nested items table, toggled with a view button, using loops and a simple animation to reveal details.

Create dynamic UI with angular animations by defining an item state, a show/hide trigger, and transitions that animate height from 0 to 150 pixels over 1 second.

learn to export a csv from orders by calling the order service export, handling a blob response, creating a download URL, and programmatically clicking a link to save the file.

Learn to build a time series bar chart in an Angular dashboard using the C3 library, fetch sales data via an order service, and bind data to a chart div.