Видео

import { NgModule } from '@angular/core'; import { NzAffixModule } from 'ng-zorro-antd/affix'; import { NzAlertModule } from 'ng-zorro-antd/alert'; import { NzAnchorModule } from 'ng-zorro-antd/anchor'; import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzBackTopModule } from 'ng-zorro-antd/back-top'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCalendarModule } from 'ng-zorro-antd/calendar'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzCarouselModule } from 'ng-zorro-antd/carousel'; import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzCommentModule } from 'ng-zorro-antd/comment'; import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button'; import { NzWaveModule } from 'ng-zorro-antd/core/wave'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzImageModule } from 'ng-zorro-antd/image'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzListModule } from 'ng-zorro-antd/list'; import { NzMentionModule } from 'ng-zorro-antd/mention'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMessageModule } from 'ng-zorro-antd/message'; import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzProgressModule } from 'ng-zorro-antd/progress'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzRateModule } from 'ng-zorro-antd/rate'; import { NzResultModule } from 'ng-zorro-antd/result'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzSkeletonModule } from 'ng-zorro-antd/skeleton'; import { NzSliderModule } from 'ng-zorro-antd/slider'; import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzStatisticModule } from 'ng-zorro-antd/statistic'; import { NzStepsModule } from 'ng-zorro-antd/steps'; import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { NzTableModule } from 'ng-zorro-antd/table'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; import { NzTimelineModule } from 'ng-zorro-antd/timeline'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzTransferModule } from 'ng-zorro-antd/transfer'; import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzTypographyModule } from 'ng-zorro-antd/typography'; import { NzUploadModule } from 'ng-zorro-antd/upload'; import { NzResizableModule } from 'ng-zorro-antd/resizable'; import { NzPipesModule } from 'ng-zorro-antd/pipes'; @NgModule({ exports: [ NzAffixModule, NzAlertModule, NzAnchorModule, NzAutocompleteModule, NzAvatarModule, NzBackTopModule, NzBadgeModule, NzButtonModule, NzBreadCrumbModule, NzCalendarModule, NzCardModule, NzCarouselModule, NzCascaderModule, NzCheckboxModule, NzCollapseModule, NzCommentModule, NzDatePickerModule, NzDescriptionsModule, NzDividerModule, NzDrawerModule, NzDropDownModule, NzEmptyModule, NzFormModule, NzGridModule, NzI18nModule, NzIconModule, NzImageModule, NzInputModule, NzInputNumberModule, NzLayoutModule, NzListModule, NzMentionModule, NzMenuModule, NzMessageModule, NzModalModule, NzNoAnimationModule, NzNotificationModule, NzPageHeaderModule, NzPaginationModule, NzPopconfirmModule, NzPopoverModule, NzProgressModule, NzRadioModule, NzRateModule, NzResultModule, NzSelectModule, NzSkeletonModule, NzSliderModule, NzSpinModule, NzStatisticModule, NzStepsModule, NzSwitchModule, NzTableModule, NzTabsModule, NzTagModule, NzTimePickerModule, NzTimelineModule, NzToolTipModule, NzTransButtonModule, NzTransferModule, NzTreeModule, NzTreeViewModule, NzTreeSelectModule, NzTypographyModule, NzUploadModule, NzWaveModule, NzResizableModule, NzPipesModule, ] }) export class DemoNgZorroAntdModule { }

import { NgModule } from '@angular/core'; import { NzAffixModule } from 'ng-zorro-antd/affix'; import { NzAlertModule } from 'ng-zorro-antd/alert'; import { NzAnchorModule } from 'ng-zorro-antd/anchor'; import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzBackTopModule } from 'ng-zorro-antd/back-top'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCalendarModule } from 'ng-zorro-antd/calendar'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzCarouselModule } from 'ng-zorro-antd/carousel'; import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzCommentModule } from 'ng-zorro-antd/comment'; import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button'; import { NzWaveModule } from 'ng-zorro-antd/core/wave'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzImageModule } from 'ng-zorro-antd/image'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzListModule } from 'ng-zorro-antd/list'; import { NzMentionModule } from 'ng-zorro-antd/mention'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMessageModule } from 'ng-zorro-antd/message'; import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzProgressModule } from 'ng-zorro-antd/progress'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzRateModule } from 'ng-zorro-antd/rate'; import { NzResultModule } from 'ng-zorro-antd/result'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzSkeletonModule } from 'ng-zorro-antd/skeleton'; import { NzSliderModule } from 'ng-zorro-antd/slider'; import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzStatisticModule } from 'ng-zorro-antd/statistic'; import { NzStepsModule } from 'ng-zorro-antd/steps'; import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { NzTableModule } from 'ng-zorro-antd/table'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; import { NzTimelineModule } from 'ng-zorro-antd/timeline'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzTransferModule } from 'ng-zorro-antd/transfer'; import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzTypographyModule } from 'ng-zorro-antd/typography'; import { NzUploadModule } from 'ng-zorro-antd/upload'; import { NzResizableModule } from 'ng-zorro-antd/resizable'; import { NzPipesModule } from 'ng-zorro-antd/pipes'; @NgModule({ exports: [ NzAffixModule, NzAlertModule, NzAnchorModule, NzAutocompleteModule, NzAvatarModule, NzBackTopModule, NzBadgeModule, NzButtonModule, NzBreadCrumbModule, NzCalendarModule, NzCardModule, NzCarouselModule, NzCascaderModule, NzCheckboxModule, NzCollapseModule, NzCommentModule, NzDatePickerModule, NzDescriptionsModule, NzDividerModule, NzDrawerModule, NzDropDownModule, NzEmptyModule, NzFormModule, NzGridModule, NzI18nModule, NzIconModule, NzImageModule, NzInputModule, NzInputNumberModule, NzLayoutModule, NzListModule, NzMentionModule, NzMenuModule, NzMessageModule, NzModalModule, NzNoAnimationModule, NzNotificationModule, NzPageHeaderModule, NzPaginationModule, NzPopconfirmModule, NzPopoverModule, NzProgressModule, NzRadioModule, NzRateModule, NzResultModule, NzSelectModule, NzSkeletonModule, NzSliderModule, NzSpinModule, NzStatisticModule, NzStepsModule, NzSwitchModule, NzTableModule, NzTabsModule, NzTagModule, NzTimePickerModule, NzTimelineModule, NzToolTipModule, NzTransButtonModule, NzTransferModule, NzTreeModule, NzTreeViewModule, NzTreeSelectModule, NzTypographyModule, NzUploadModule, NzWaveModule, NzResizableModule, NzPipesModule, ] }) export class DemoNgZorroAntdModule { }

Yes!

Yes, exactly! When the browser is open, the notification will display in the foreground; otherwise, it’ll show as a background notification.

Hi! It sounds like there might be an issue with the date picker component or its dependencies. Make sure you've imported the necessary date picker library and that it's properly initialized. Also, check if there are any JavaScript or CSS conflicts that might be preventing it from displaying.

Thank you so much! 😊❤️ Yes, this project will have about 40 parts to cover everything in detail. And I’ll keep your suggestion for the React + Spring Boot e-commerce app in mind! It’s a fantastic idea with a lot of useful features to explore. Stay tuned for more, and keep coding! 🚀

@@code_with_projects lesss go!!! i was looking for a project to add in my resume and this quiz app is perfect and i also want that e commerce app

Great question! Yes, you're absolutely right-it's more secure to retrieve the user ID from the SecurityContext rather than asking for it from the client. I’ll definitely implement this approach in future projects. Thanks for the suggestion!

Haha, I appreciate the interest, but sorry, I can’t share personal details here-keeping things as mysterious as a secret recipe! 😄 Thanks for understanding!

It sounds like the navbar might be checking user roles twice! Please double-check the logic of the user roles where you are showing the navbars to make sure it's displaying only one.

Thank you for following the tutorial! No, this project doesn’t include an admin feature.

@@code_with_projects Thank you for your reponse. please can you suggest me how to create admin feature? like what should i include in admin feature?

Angular 16

Angular 16

Thanks for watching! If you’re seeing any console errors, please share them so I can help troubleshoot.

Hi! Thanks for following along! To set up the admin email and password, please check out the section on Admin account creation here: ruclips.net/video/pqahN8UDQOU/видео.html. Let me know if you have more questions!

Hey there! The StackOverflowError usually occurs due to a circular reference in the data, causing an infinite loop during serialization. Try checking your entity relationships for any bidirectional mappings, and consider using @JsonIgnore on one side to prevent this. Let me know if that helps!

Thank you so much for your encouraging words! I'm thrilled to hear that you found the course helpful and were able to build a full-stack application successfully. I appreciate your suggestion for Vue.js, Angular, and working with stored procedures in Spring Boot-these are great ideas, and I’ll definitely keep them in mind for future content. Your support means a lot, and I look forward to sharing more practical tutorials with the developer community. Keep building, and stay tuned! 🌟💐👏👍

.navbar { display: flex; align-items: center; padding: 0 16px; } .navbar-brand { font-size: 20px; font-weight: 600; margin-right: 16px; } .spacer { flex: 1; } button { color: white; text-transform: uppercase; margin-left: 8px; } button.active { font-weight: 600; } .custom-toolbar { background-color: #ff0000; }

Thanks for the comment! For a clearer idea on how to set up the relationship, please share your entity classes for the cart and order. This will help pinpoint any issues in the structure. 😊

This Angular module file, DemoNgZorroAntdModule, imports and exports a variety of components from the NG-ZORRO library, a popular UI toolkit based on Ant Design for Angular. It provides components like buttons, forms, modals, tables, notifications, icons, and more, which are used to create a wide range of user interface elements with consistent design and functionality. Key Points: 1. Icon Module Setup: - The NzIconModule is configured with all icons from the @ant-design/icons-angular package, allowing the use of Ant Design icons throughout the app. 2. Imports and Exports: - Only the NzIconModule is imported within this module because it needs additional configuration (icons). - All other components are directly exported. This allows any module that imports.DemoNgZorroAntdModule to have access to all NG-ZORRO UI components without importing them individually. Purpose: This setup centralizes all NG-ZORRO imports, making it easy to manage and reuse UI components throughout an Angular app. By exporting all necessary modules, the app can access these components directly, streamlining UI development and ensuring a consistent design across the project. Here's the file code: import { NgModule } from '@angular/core'; import { NzAffixModule } from 'ng-zorro-antd/affix'; import { NzAlertModule } from 'ng-zorro-antd/alert'; import { NzAnchorModule } from 'ng-zorro-antd/anchor'; import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzBackTopModule } from 'ng-zorro-antd/back-top'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCalendarModule } from 'ng-zorro-antd/calendar'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzCarouselModule } from 'ng-zorro-antd/carousel'; import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzCommentModule } from 'ng-zorro-antd/comment'; import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button'; import { NzWaveModule } from 'ng-zorro-antd/core/wave'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzImageModule } from 'ng-zorro-antd/image'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzListModule } from 'ng-zorro-antd/list'; import { NzMentionModule } from 'ng-zorro-antd/mention'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMessageModule } from 'ng-zorro-antd/message'; import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzProgressModule } from 'ng-zorro-antd/progress'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzRateModule } from 'ng-zorro-antd/rate'; import { NzResultModule } from 'ng-zorro-antd/result'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzSkeletonModule } from 'ng-zorro-antd/skeleton'; import { NzSliderModule } from 'ng-zorro-antd/slider'; import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzStatisticModule } from 'ng-zorro-antd/statistic'; import { NzStepsModule } from 'ng-zorro-antd/steps'; import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { NzTableModule } from 'ng-zorro-antd/table'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; import { NzTimelineModule } from 'ng-zorro-antd/timeline'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzTransferModule } from 'ng-zorro-antd/transfer'; import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzTypographyModule } from 'ng-zorro-antd/typography'; import { NzUploadModule } from 'ng-zorro-antd/upload'; import { NzResizableModule } from 'ng-zorro-antd/resizable'; import { NzPipesModule } from 'ng-zorro-antd/pipes'; import * as AllIcons from '@ant-design/icons-angular/icons'; const antDesignIcons = Object.values(AllIcons); @NgModule({ imports: [ NzIconModule.forChild(antDesignIcons), ], exports: [ NzAffixModule, NzAlertModule, NzAnchorModule, NzAutocompleteModule, NzAvatarModule, NzBackTopModule, NzBadgeModule, NzButtonModule, NzBreadCrumbModule, NzCalendarModule, NzCardModule, NzCarouselModule, NzCascaderModule, NzCheckboxModule, NzCollapseModule, NzCommentModule, NzDatePickerModule, NzDescriptionsModule, NzDividerModule, NzDrawerModule, NzDropDownModule, NzEmptyModule, NzFormModule, NzGridModule, NzI18nModule, NzIconModule, NzImageModule, NzInputModule, NzInputNumberModule, NzLayoutModule, NzListModule, NzMentionModule, NzMenuModule, NzMessageModule, NzModalModule, NzNoAnimationModule, NzNotificationModule, NzPageHeaderModule, NzPaginationModule, NzPopconfirmModule, NzPopoverModule, NzProgressModule, NzRadioModule, NzRateModule, NzResultModule, NzSelectModule, NzSkeletonModule, NzSliderModule, NzSpinModule, NzStatisticModule, NzStepsModule, NzSwitchModule, NzTableModule, NzTabsModule, NzTagModule, NzTimePickerModule, NzTimelineModule, NzToolTipModule, NzTransButtonModule, NzTransferModule, NzTreeModule, NzTreeViewModule, NzTreeSelectModule, NzTypographyModule, NzUploadModule, NzWaveModule, NzResizableModule, NzPipesModule, ] }) export class DemoNgZorroAntdModule {}

Hi! If the graph isn’t displaying, double-check that your data is correctly loaded and connected to the graph component, and ensure there are no console errors.

Hi! Thanks for reaching out. It sounds like the registration process may be missing a final save step. Make sure you’re saving the user details by calling the save method from your user repository. Sometimes data might appear processed but won’t persist without that final step in the backend. Let me know if that helps!

You're very welcome-glad the project is working well for you! As for the search issue, there’s no criteria on price in the search query itself. If the car is posted successfully with double as the price data type, then that part should be working fine. Please double-check that the search query API is receiving the criteria data from Angular correctly and is returning the expected results. Let me know if that helps!

@code_with_projects dw i was puting double type not the class Double that has D capitale

👍

@@code_with_projects btw can you do a tutorial of google map api implementation in angular ?

Sometimes CSS issues can come from a missed import or specific selector. Double-check your file path and selector targeting, and let me know if you're still having trouble!

Thanks for pointing that out! Which file are you referring to? Let me know so I can guide you to the right place!

The notificationservice.js file is designed to send push notifications using Firebase Cloud Messaging (FCM). Here’s a breakdown: 1. Dependencies: It imports Firebase admin SDK to use Firebase services for messaging. 2. sendNotification(deviceToken, title, body): - Sends a single notification to a specific device. - Accepts the device token and the message content (title and body). - Creates a message object with the notification details and sends it using admin.messaging().send(). 3. sendMultipleNotification(deviceTokens, title, body): - Sends notifications to multiple devices at once. - Takes an array of device tokens and constructs a message for each token. - Uses sendEach() to send all messages in a batch. Both methods catch and throw errors if they occur during the sending process, ensuring any messaging issues are traceable. This setup is useful for applications needing real-time notifications across single or multiple devices.

Hey! I understand things have changed with Angular 16 & 17+. I’ll be updating the Angular version in an upcoming project video. If you want the same results for this project, I recommend using the same version as in the video. Thanks for your patience! 😊

You're welcome! The 401 Unauthorized error typically points to an authentication issue, such as an incorrect URL or missing payload. Double-check that the payload has the correct key-value pairs (matching variable names).

@ thanks for the reply. I found the problem, I had to disable spring security dependency.

import { NgModule } from '@angular/core'; import { NzAffixModule } from 'ng-zorro-antd/affix'; import { NzAlertModule } from 'ng-zorro-antd/alert'; import { NzAnchorModule } from 'ng-zorro-antd/anchor'; import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzBackTopModule } from 'ng-zorro-antd/back-top'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCalendarModule } from 'ng-zorro-antd/calendar'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzCarouselModule } from 'ng-zorro-antd/carousel'; import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzCommentModule } from 'ng-zorro-antd/comment'; import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button'; import { NzWaveModule } from 'ng-zorro-antd/core/wave'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzImageModule } from 'ng-zorro-antd/image'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzListModule } from 'ng-zorro-antd/list'; import { NzMentionModule } from 'ng-zorro-antd/mention'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { NzMessageModule } from 'ng-zorro-antd/message'; import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'; import { NzPopoverModule } from 'ng-zorro-antd/popover'; import { NzProgressModule } from 'ng-zorro-antd/progress'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzRateModule } from 'ng-zorro-antd/rate'; import { NzResultModule } from 'ng-zorro-antd/result'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzSkeletonModule } from 'ng-zorro-antd/skeleton'; import { NzSliderModule } from 'ng-zorro-antd/slider'; import { NzSpinModule } from 'ng-zorro-antd/spin'; import { NzStatisticModule } from 'ng-zorro-antd/statistic'; import { NzStepsModule } from 'ng-zorro-antd/steps'; import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { NzTableModule } from 'ng-zorro-antd/table'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzTagModule } from 'ng-zorro-antd/tag'; import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; import { NzTimelineModule } from 'ng-zorro-antd/timeline'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; import { NzTransferModule } from 'ng-zorro-antd/transfer'; import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzTreeViewModule } from 'ng-zorro-antd/tree-view'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzTypographyModule } from 'ng-zorro-antd/typography'; import { NzUploadModule } from 'ng-zorro-antd/upload'; import { NzResizableModule } from 'ng-zorro-antd/resizable'; import { NzPipesModule } from 'ng-zorro-antd/pipes'; import * as AllIcons from '@ant-design/icons-angular/icons'; const antDesignIcons = Object.values(AllIcons); @NgModule({ imports: [ NzIconModule.forChild(antDesignIcons), ], exports: [ NzAffixModule, NzAlertModule, NzAnchorModule, NzAutocompleteModule, NzAvatarModule, NzBackTopModule, NzBadgeModule, NzButtonModule, NzBreadCrumbModule, NzCalendarModule, NzCardModule, NzCarouselModule, NzCascaderModule, NzCheckboxModule, NzCollapseModule, NzCommentModule, NzDatePickerModule, NzDescriptionsModule, NzDividerModule, NzDrawerModule, NzDropDownModule, NzEmptyModule, NzFormModule, NzGridModule, NzI18nModule, NzIconModule, NzImageModule, NzInputModule, NzInputNumberModule, NzLayoutModule, NzListModule, NzMentionModule, NzMenuModule, NzMessageModule, NzModalModule, NzNoAnimationModule, NzNotificationModule, NzPageHeaderModule, NzPaginationModule, NzPopconfirmModule, NzPopoverModule, NzProgressModule, NzRadioModule, NzRateModule, NzResultModule, NzSelectModule, NzSkeletonModule, NzSliderModule, NzSpinModule, NzStatisticModule, NzStepsModule, NzSwitchModule, NzTableModule, NzTabsModule, NzTagModule, NzTimePickerModule, NzTimelineModule, NzToolTipModule, NzTransButtonModule, NzTransferModule, NzTreeModule, NzTreeViewModule, NzTreeSelectModule, NzTypographyModule, NzUploadModule, NzWaveModule, NzResizableModule, NzPipesModule, ] }) export class DemoNgZorroAntdModule {}

Thanks a lot! Glad you're enjoying it-stay tuned, the next video is on the way!

Sure! The website link in the video description has the source code you need. Thanks for watching!

Thanks for your comment! If the buttons aren't working, it could be due to incorrect routing paths. Please verify the routing path of the header's nav links that you have defined inside the app.routing.module.ts.

Thanks for your comment! Yes, you can fetch the token directly from the backend to avoid manual entry. This allows for automatic handling of notifications and enhances user experience.

Great question! Storing refresh tokens in a database can enhance security and allow for better management of token expiration and revocation. I opted for a different approach for simplicity and demonstration purposes in the video. However, using a RefreshTokenRepository is definitely a good practice for production applications. Thanks for pointing that out!

Hey! I understand things have changed with Angular 16 & 17+. I’ll be updating the Angular version in an upcoming project video. If you want the same results for this project, I recommend using the same version as in the video. Thanks for your patience! 😊

Thanks for your question! The secret key is crucial for securing sensitive information, often used for signing and verifying tokens or encrypting data. It should always be kept private to ensure the integrity and security of your application. I appreciate the suggestion for a video on this topic; I'll definitely consider it for future content!

Thank you so much! 🙌 I'm glad you're enjoying the CRUD series. More content is on the way, so stay tuned!

Hi! The code in the video should be complete, but sometimes minor details might be easy to miss. Double-check the code and compare it with the video carefully. If you're still encountering errors, feel free to ask-I’m here to help!

Hi! It sounds like a permissions issue that’s causing the 403 error. Ensure that your delete endpoint has the correct authorization set up and that your front-end is properly sending any required auth tokens. Also, check if your API response is being handled correctly on the client side. If the product is deleted after a manual refresh, the backend is likely working, but the front-end may need adjustments to reload data after deletion. Let me know if you need more guidance!

Thanks for asking! I’m doing a full-time job along with freelancing and sharing my experiences through this channel. Appreciate your support!

@@code_with_projects sir product based or service based & how much experience 😄 just asking if you don't mind

I have 8 years of experience, primarily in product-based roles.

@@code_with_projects sir your skillset is exceptional for us please make a video on your professional journey for us as an inspiration

Sure, I will. Keep supporting.

Apologies we can't give the source code free because it takes a lot of time and effort to build these projects. The videos of this project are available for free. Please watch the videos and write code based on them. This will enhance your understanding of Angular and Spring Boot.

Thank you for the great feedback! To add a product to the cart, you would need to send a request to the backend with the following payload: 'Long userId' and 'Long productId.' This will allow the product to be added to the cart through the API.

@@code_with_projects Thank you for answer ! I added one product to cart with userId and productId , but I get an error when i want to add same product to the same customer. The error is Duplicate entry '4' for key 'cart.UK_dqdpmxpsb72di6d4pgpn0qex1'. How to increase product quantity in cart ? Can you write enpoint end variables ?