How to Create Overlays with Angular CDK

In this post, we’ll understand how we can use the overlay feature that comes bundled with the Angular CDK library to create custom floating elements on the screen.

Setting up the Angular project:

Let’s quickly get started by creating a new Angular application.

ng new overlay-demo

Next, we need to install the Angular CDK library.

npm install @angular/cdk

And start the application with the serve command.

ng serve

If you did everything right, you’ll see the above screen on the localhost:4200 address.

Now, let’s get rid of all the default content created by Angular. First, open your app.component.html file and delete all of its content. Then open the app.component.ts file and remove all the content inside the AppComponent class. After making these changes you’ll end up with an empty screen and a barebones class. Something like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

Now, before creating the overlay we need to import some styles that come bundled with the CDK library. The Overlay needs these styles to work as expected. Let’s import those styles inside the style.css file located inside the src directory.

@import '@angular/cdk/overlay-prebuilt.css';

If you’re using Angular Material in your project, you don’t need to explicitly import these styles, since these styles will be included with the theme itself.

Creating Overlay Using Directives:

Before we can use the Overlay feature we need to import OverlayModule inside AppModule class and add it to the imports array.

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  declarations: [...],
  imports: [
    ...
    OverlayModule
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule { }

Importing this module will expose certain overlay directives to our application which will allow us to control the visibility of the overlay template.

Now let’s create a button that will change the visibility of the Overlay.

<button>Click me!</button>
<p>Click the button to hide/show the overlay!</p>

The overlay will appear below the button and will overlap the paragraph tag.

Next, we’ll create the overlay template.

<ng-template>
  <div class="overlay-wrapper">Hello Overlay!</div>
</ng-template>

We’ll also create a flag inside AppComponent class that’ll determine the state of the overlay. If the flag is false Overlay will be hidden and if true, the overlay will be visible.

export class AppComponent {
  isOpen = false;
}

Now to trigger Overlay behavior we’ll add some directives to the button.

<button
  (click)="isOpen = !isOpen"
  cdkOverlayOrigin
  #toggle="cdkOverlayOrigin"
>
  Click me!
</button>

Click event will simply toggle the value of the isOpen flag. The cdkOverlayOrigin directive will mark the button as the origin of the overlay which means the Overlay will be rendered exactly below the button.

And to connect the template with the button we’ll use the cdkConnectedOverlay directive. As you can see, we’ve specified the isOpen flag to the cdkConnectedOverlayOpen directive which will determine if the Overlay is hidden or not. And cdkConnectedOverlayOrigin consumes the #toggle template reference variable which connects the button with the template.

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOpen]="isOpen"
  [cdkConnectedOverlayOrigin]="toggle"
>
  <div class="overlay-wrapper">Hello Overlay!</div>
</ng-template>

After adding the above code our app.component.html file will look like this.

<div>
  <button
    (click)="isOpen = !isOpen"
    cdkOverlayOrigin
    #toggle="cdkOverlayOrigin"
  >
    Click me!
  </button>
  <p>Click the button to hide/show the overlay!</p>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOpen]="isOpen"
    [cdkConnectedOverlayOrigin]="toggle"
  >
    <div class="overlay-wrapper">Hello Overlay!</div>
  </ng-template>
</div>

And app.component.ts file will look like this.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isOpen = false;
}

We’ll also add a few styles to the app.component.css file to add some styling to our overlay.

.overlay-wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e3e3e3;
}

And we’re done! Now simply clicking the button will toggle the visibility of the Overlay.