Cache angular components using RouteReuseStrategy

The project I have worked on has several pages that load data in Angular Material tables. The application’s user interface consists of a left menu with multiple tabs, and clicking on each tab loads the corresponding component and its child on the right. However, initializing the component appears to be an expensive operation, as it takes time to load the parent and child components and initialize the Material table, especially when there is a considerable amount of data to be displayed.

This delay causes the application to become unresponsive, especially when the user switches between tabs quickly, causing the components to pile up. I initially thought that the issue was related to fetching data through the network, but caching the data did not help to improve the performance.

After researching the topic of reusing components, I discovered the RouteReuseStrategy class. This class provides hooks for developers to advise Angular on when to reuse a route and how to cache a route. By utilizing this class, we can avoid the expensive process of destroying and initializing the components and displaying data in the table.

Using MSAL angular to authenticate a user against azure ADB2C via authorization code flow with Proof Key for Code Exchange.

Previously, I switched from using oidc-client to MSAL Angular to integrate an Angular app with Azure AD for authentication. If you’re interested, you can read more here. More recently, I used MSAL Angular again to connect another application, but this time to an Azure AD B2C tenant. Since I had prior experience and Microsoft provided good documentation and sample projects to follow, connecting to Azure AD B2C using MSAL Angular was not too difficult. In this post, I share how I adapted the sample project provided by Microsoft to integrate the application with our Azure AD B2C tenant and describe a few minor obstacles that I encountered.

Displaying text in a tool tip when text overflows its container

In several apps I work on, we use angular material to display data in a table. Sometimes, long text causes the height of the table cells to increase, resulting in an unaesthetic UI.

Azure AD authentication in angular using MSAL angular v2 library

In previous projects, I use Oidc-client-js to authenticate users against azure AD. Oidc-client-js is a great library but is no longer maintained by the main author. Because of this, I have switched to MSAL angular v2 in my current project. Microsoft provides good documentation and sample projects to help developers to integrate the library into their project. I am able to follow the sample project to get authentication working in my angular application, albeit a few hiccups along the way. In this post, I share some of the issues I ran into and how I structure the codes for authentication.

Common frameworks, libraries and design patterns I use

In this short post, I share some of the core frameworks, libraries and design patterns I worked with on a regular basis.

Rendering a PDF in angular that works with mobile browsers using ng2-pdf-viewer

In several applications I worked on, we used iframe to display PDFs. The PDF displays fine on desktop browsers. However, on a mobile browser such as Safari on iPhone and iPAD, only the first page shows up. Many people have run into the same issue, as discussed in this stackoverflow post and also on the apple communities page.

Differences between a Promise and an Observable

In this post, I outline a few fundamental concepts I have learned about an Observable and how it is different than a Promise.

Before discussing the differences between an Observable and a Promise, let’s talk about what they have in common. Both Observables and Promises are frameworks for producing and consuming data. They follow the push protocol which means the producer determines exactly when to send the data to the consumer. In comparison, in a pull protocol, the producer only produces data when the consumer asks for it.

Integrate Azure AD B2C reset password user flow in angular using oidc-client-js.

This post continues from previous posts which I go over using oidc-client-js to interact with azure adb2c:

• Integrate a sign up / sign in user flow to authenticate a user against azure adb2c
• Integrate a edit-profile user flow.

In this post, I’m going to share how to handle resetting password.

You can find the sample project here.

Integrate Azure AD B2C profile editing user flow in angular using oidc-client-js.

This post is a continuation of the blog post I wrote a couple months ago on how to authenticate user against Azure ADB2C from angular app using oidc-client-js. In that post, I discussed how to integrate AD B2C sign up and sign in flows to allow the user to authenticate against AD B2C. In this post, I’m going to show an example of integrating the editing profile user flow. You can find the accompanying sample project here.

I assume you have some basic understanding of angular and Rxjs and focus primarily on the aspects relating to integrating the edit user flow. If you have questions about the codes, feel free to reach out.

Also, check out the next post relating to oidc-client-js in which I go over handling password reset.

About integrated windows authentication and how to implement it in ASP.NET core running on IIS.

In this post, I share what I have learned about integrated windows authentication and how to enable it in a web application which consists of an angular front-end and ASP.NET core 3 backend.