In this tutorial, we will be discussing how to add Auth Guards in an Ionic 6 Angular application to limit page access. Auth Guards are used to restrict access to certain pages in the app based on user authentication status. This can be useful for pages that contain sensitive information or require a user to be logged in to access.
Angular
Highlighting Filtered Text in Angular Material Table with Custom Directive
In this tutorial, we will be learning how to implement a custom directive in Angular to highlight the filter text in a Material table. When searching for a specific term in a table, it can be helpful to have the search term highlighted in the results to make it more prominent and easier to spot. By using a custom directive, we can apply this highlighting effect to any text in the table, making it a reusable solution that can be applied to multiple tables or elements.
Angular + Firebase – Single or Multiple File Upload Drop or File Select
In this tutorial, we will be discussing how to implement file upload in an Angular application using Firebase as the backend. We will be covering both single and multiple file uploads, as well as the ability to upload files via drag-and-drop or by selecting them through a file dialog.
We will be using the AngularFire2 library, which is the official library for Firebase in Angular, to handle the communication between the Angular application and Firebase.
Angular 14 – Four Methods to Navigate to the Previous Page with Back Button
In this tutorial, we will be discussing the different methods for adding a back button in an Angular application to navigate to the previous page. The back button is a useful feature that allows the user to easily navigate back to the previous page, which can improve the user experience of your application.
We will be discussing four different methods for adding a back button in Angular:
- Using the location.back() method
- Using the router.navigate() method
- Using the Location service
- Using the routerLink directive
Angular 14 – CanDeactivate with Student Profile Form Example
In this tutorial, we will be discussing how to use the CanDeactivate guard in an Angular application. The CanDeactivate guard is used to prevent a user from navigating away from a route if there are unsaved changes in a form. This can be useful for situations where a user is filling out a form and accidentally navigates away from the page, potentially losing their progress.
We will be using a student profile form as an example to show how to implement the CanDeactivate guard in an Angular application.