using overlay to display overaly content

Author: willhuubap

package-lock.json

@@ -12,6 +12,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.0",
+    "@angular/cdk": "^7.3.1",
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",

package.json

@@ -1,3 +1,22 @@
-<div class="p-5">
-  <button class="btn btn-outline-success">Overlay Pop-up</button>
+<div class="p-5 position-relative">
+  <button
+    class="btn btn-outline-success"
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    (click)="isOpen = !isOpen">
+    Overlay Pop-up
+  </button>
+
+
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="isOpen">
+    <div class="bg-success position-absolute shadow-lg rounded p-2 mb-5">
+      {{ 'this is an overlay!!!!!' }}
+
+    </div>
+  </ng-template>
+
 </div>
+

src/app/app.component.html

@@ -6,5 +6,16 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  isOpen: boolean = false;
+
+  colors = [
+    {color: '#F44336', name: 'red'},
+    {color: '#E91E63', name: 'pink'},
+    {color: '#9C27B0', name: 'purple'},
+    {color: '#3F51B5', name: 'blue'},
+    {color: '#009688', name: 'green'},
+    {color: '#FFEB3B', name: 'yellow'},
+    {color: '#FF9800', name: 'orange'},
+    {color: '#795548', name: 'brown'}
+  ];
 }

src/app/app.component.ts

@@ -2,13 +2,17 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {A11yModule} from '@angular/cdk/a11y';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    OverlayModule,
+    A11yModule
   ],
   providers: [],
   bootstrap: [AppComponent]