Custom Overlays with Angular’s CDK by thoughtram
- Here are the core building blocks of our application: – – As we can see, we have two components, one service and a class that represents a remote control to an opened overlay.
- In addition, we define an interface that describes the shape of the configuration from a consumer perspective: – – Next, we define some initial values for the config, so that, by default, every overlay has a backdrop alongside a and : – – With that in place, we can define…
- There are several strategies available as part of the CDK, such as – – For our file preview overlay, we are going to use the because we don’t want the user to be scrolling in the background while the overlay is open.
- There are two position strategies available as part of the CDK: – – We’ll be using the for our overlay because it’s supposed to be positioned globally on screen, unrelated to other elements.
- Similar to the we can access all position strategies through the service like so: – – With the configuration in place, we go ahead and define another method that hides the complexity of creating an overlay with a given configuration: – – We now refactor our method to generate a…
The Angular Material CDK provides us with tools to build awesome and high-quality Angular components without adopting the Material Design visual language. Its goal is to make our life as developers easier and extract common behaviors and patterns shared between multiple Angular Material components. In this post, we’ll use the CDK to build a custom overlay that looks and feels much like the Google Drive file preview overlay.
@maxim_koretskyi: Custom Overlays with Angular’s CDK
You have probably heared of Angular Material haven’t you? If you haven’t, it’s a library that provides you with high-quality Material Design components for Angular. Material Design itself is a visual design language that aims for consistency of user experience across all platforms and device sizes. That’s cool but what if your company has its own opinions about styles and the overall look and feel of the UI? How do we get the best of Angular Material without adopting the Material Design visual language?
Tada 🎉! That’s where Angular Material’s Component Dev Kit (CDK for short) comes into play. The CDK provides us with tools to build awesome and high-quality Angular components without adopting the Material Design visual language. Its goal is to make our life as developers easier and extract common behaviors and patterns shared between multiple Angular Material components. For instance, the datepicker, snackbar, or tooltip have something in common; they need to dynamically open up some floating panel on the screen. But that’s just the tip of the ice berg. There are many different packages for all sorts of things such as that helps us improve the accessibility of our UI components. There’s even a package with utilities to build responsive UIs that react to screen-size changes. For a more complete list, please check out the official documentation.
Over at MachineLabs, we thought it would be useful to provide a way to preview generated output files (mostly…