{"id":1344,"date":"2023-08-21T05:00:00","date_gmt":"2023-08-21T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1344"},"modified":"2023-08-18T15:06:14","modified_gmt":"2023-08-18T22:06:14","slug":"displaying-an-overlay-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/displaying-an-overlay-with-angular\/","title":{"rendered":"Displaying an overlay with Angular"},"content":{"rendered":"\n

We covered how to display a dialog in two lines of code<\/a> earlier. Today, I want to illustrate how we can show an overlay on any portion of the screen using the Angular CDK<\/a>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

First, it’s important to mention that Angular CDK is NOT part of Angular Material<\/a>, and you can use the CDK independently from any component library.<\/p>\n\n\n\n

To install the CDK: npm install @angular\/cdk<\/code><\/p>\n\n\n\n

Then, you would import the OverlayModule<\/a><\/code> wherever you need it (here in a standalone component):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This module allows you to inject an Overlay service<\/a> that can be used to create an overlay and display a component in it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

By default, overlays have a transparent background, so I added a panelClass for my overlay and then gave it a background color – Note that you also need to import the CSS styles from the CDK in your global CSS file:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

There are plenty of configuration options, and if you want to see a different approach, look at this tutorial for a dropdown built with an overlay<\/a>. The source code for my basic example is here on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

We covered how to display a dialog in two lines of code earlier. Today, I want to illustrate how we can show an overlay on any portion of the screen using the Angular CDK. First, it’s important to mention that Angular CDK is NOT part of Angular Material, and you can use the CDK independently […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,34],"tags":[],"class_list":["post-1344","post","type-post","status-publish","format-standard","hentry","category-angular","category-cdk"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1344"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1344\/revisions"}],"predecessor-version":[{"id":1349,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1344\/revisions\/1349"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}