DEV Community: Dinesh Haribabu

Managing Multiple Dialogs in Angular Material Projects

Dinesh Haribabu — Wed, 16 Oct 2024 14:46:01 +0000

In Angular Material applications, the usage of dialogs is pretty common and becomes challenging when you need to manage multiple dialogs simultaneously. By default in Angular Material, the most recently opened dialog always stays on top, making it difficult to interact with others that are opened earlier. In this post, I’ll walk you through a couple of practical solutions, starting with a z-index approach and then delving into a better alternative for most cases.

The z-index fix: First thought, not always the best

For stacking issues of elements, the go-to approach would be to use the z-index property to control which element appears on top. In case of multiple dialogs, by bumping the z-index of the dialog that receives the click, we can allow users to interact with it by bringing it to the front.

Here’s the code for that solution:

public bringToFront(dialogId: string): void {
  this.cdk.getContainerElement().childNodes.forEach((x: any) => {
    if (x.innerHTML.indexOf('id="' + dialogId + '"') <= 0) {
      x.style["z-index"] = 1000;
    } else {
      x.style["z-index"] = 1001;
    }
  });
}

And in the template:

<div (mousedown)="bringToFront(data.id)">
  {{data.dialogContent}}
</div>

Problem: Overlay components break the z-index fix

While this works for basic dialogs, the problem appears when a dialog includes components that use overlays—for example, dropdowns, tooltips, or menus. These elements are wrapped inside an overlay container and all of them have a z-index of 1000 by design.

When you try to bring a dialog to the front using a z-index of 1001, the overlay components inside that dialog still have a z-index of 1000. This makes the overlay elements inaccessible because they are displayed under the dialog. So while the solution works for plain dialogs, it falls short in these more complex cases.

Here’s how the overlay issue looks in action:

A better solution: Reordering DOM elements

Since manipulating the z-index alone isn’t a comprehensive solution, we can turn to another approach: reordering the dialogs in the DOM hierarchy. In the DOM, elements with the same z-index are displayed based on their order in the hierarchy—the element closer to the bottom of the DOM tree appears on top in the UI.

By appending the dialog element to the end of its container, we can ensure it gets displayed on top:

public bringToFront(dialogId: string): void {
  const focusedDialog = Array.from(this.cdk.getContainerElement().childNodes).find(
    (el: HTMLElement) => el.querySelector(`#${dialogId}`)
  );

  if (focusedDialog) {
    // appendChild moves the element to the end of the container
    this.cdk.getContainerElement().appendChild(focusedDialog);
  }
}

In this solution, when a dialog is clicked, it is effectively “moved” to the top of the stack by being appended as the last child in the container. This ensures that overlay components such as dropdowns will now appear correctly on top of the dialog.

The Catch: Closing the dialog with ESC key

While this approach works for most use cases, it’s not 100% perfect. The current dialog reference maintained by Angular Material remains the last opened dialog. So, if you try to close the dialog using the ESC key, Angular Material will close the last opened dialog, not the one brought to the front.

Workaround: Custom ESC Key Listener

To resolve this, we need to manage the currently active dialog ourselves and override Angular Material’s ESC key listener. Here’s how to set up a custom ESC listener that closes the right dialog:

Keep track of the currently focused dialog in your code.
Override the ESC key functionality to close the dialog you’re managing.
Similarly, override other actions (like backdrops) to handle the right dialog.

It’s not ideal to override default listeners, but this approach will give you more control over the dialog behavior. I wish there was a way to update the current dialog reference exposed through an API so we don't have to override the listeners.

A more polished version using Services and Directives

For better code organization and reusability, I’ve structured the final solution using services and directives. This approach allows for cleaner code and easier integration into larger projects. You can check out the full implementation here:

Stackblitz Example - Managing Multiple Dialogs

With these solutions in hand, you’ll be able to manage multiple dialogs in Angular Material projects without the frustrations of stacking issues. While it’s not perfect, understanding how z-index and DOM elements reordering work will help you handle most cases, even when overlay components are involved.

How to download Google Docs as a PDF directly from the shareable link

Dinesh Haribabu — Mon, 25 Mar 2024 15:16:11 +0000

Do you ever share a Google Doc and wish people could just download it as a PDF without the extra steps? Typically, you’d have to manually export the document as a PDF, upload it somewhere, and share the link. Not exactly fun, especially if you’re constantly updating the doc.

But what if I told you there’s a quicker, more elegant way? No more manual exports, no more re-uploading. With a tiny tweak, you can create a link that instantly downloads your Google Doc as a PDF. Let's dive in!

Step 1: Grab your Google Doc's shareable link

Open your Google Doc.
Head to "File" in the menu.
Click on "Share" and then "Get shareable link."

Voilà! You've got the link—but we’re not done yet.

Step 2: Unlock the PDF magic

Normally, your shareable link will look something like this:

https://docs.google.com/document/d/<file-id>/edit?usp=sharing

Here’s where the magic happens: swap the edit part of the URL for export?format=pdf. Boom—just like that, you’ve created a direct download link for the PDF version of your document.

For example, if your original link was:

https://docs.google.com/document/d/123ABCdeF/edit?usp=sharing

It transforms into:

https://docs.google.com/document/d/123ABCdeF/export?format=pdf

Now, anyone who clicks the modified link will automatically get the most up-to-date PDF version of your document!

Why this trick matters for developers

Let’s paint a picture: You’ve got a personal website, and on that site, you’ve proudly shared your resume as a downloadable PDF. But, here’s the hassle—you’re constantly updating your resume. That means you have to re-upload a new PDF every time you add a new project or achievement. Annoying, right?

Enter the Google Docs trick. With this nifty hack, you can update your resume in Google Docs, and your download link will always point to the latest version. No re-uploading necessary. It's a hands-off, worry-free way to keep your site up to date!

And it’s not just limited to resumes. Whether you’re sharing project reports, client contracts, or presentations, this trick ensures your audience always has the freshest version. Plus, you can apply this to other Google Workspace apps like Google Sheets or Google Slides. And if you’re feeling adventurous, you can export to other formats like .docx or .epub (check out Google Workspace API docs for more).

Bonus Tip: Make your link sleek

Want to give your link a makeover? Try using a URL shortener like Linkly to create a cleaner, more shareable link. Plus, it tracks usage, giving you cool insights on how often people click to download your doc.

In short, this little trick not only saves you time but also ensures you’re always sharing the latest version of your document. It’s efficient, it’s smart, and it’s a game-changer—especially for frequently updated files. Give it a try and make document sharing a breeze!

Upskilling: A key to your career development

Dinesh Haribabu — Sat, 23 Mar 2024 15:00:31 +0000

Are you feeling stuck in your routine? Imagine this: You're a rockstar software engineer, coding like a virtuoso. But the tech world moves faster than a runaway server process. New languages, frameworks, and tools pop up all the time. Suddenly, your once-cutting-edge skills feel like a floppy disk in a world of flash drives.

This is where upskilling becomes your secret weapon.

Upskilling isn't some boring textbook thing. It's all about levelling up your software engineering game. Remember that perfect yorker ball you practised for or that killer dance move in high school? That was levelling up or in other words, upskilling! You had been doing that with consistent efforts. Now, translate those skills into your career. It's about pushing your boundaries, learning new technologies, and keeping your knowledge arsenal fresh.

Why is this so crucial in software engineering? Because the industry is a non-stop innovation machine. What's hot today might be obsolete tomorrow. Here's how upskilling keeps you ahead of the curve:

Land Your Dream Job: New skills open doors to exciting opportunities. You'll be the most attractive candidate with the latest tools in your belt.
Promotions and Pay Raises: Companies value upskilled engineers. They see your dedication and reward it with promotions and fatter paychecks.
Confidence Boost: Mastering new skills is empowering. You'll tackle challenges head-on and exude confidence that inspires everyone around you.

But what if you are feeling content with what you have? It's like trying to win a coding competition with a dial-up modem. Here's what could happen:

Limited Job Prospects: The competition is fierce. Without the latest skills, you might get passed over for that dream job.
Job Insecurity: As technologies evolve, jobs relying on outdated skills become vulnerable. Upskilling keeps you adaptable and secure.
Lower Earning Potential: Promotions and higher salaries often go to those with the most relevant skill sets. Don't miss out!

Online courses, workshops, or certifications can be your gateway to a brighter future. Remember, Upskilling isn't a cost, it's an investment.

So, what are you waiting for? Learn that new technology you were interested in and watch your career trajectory soar!