Hello everyone,

First of all, let me start with the angular material. I think you all might be aware of the angular material, isn’t it? If not it is a library offered by an angular team for reach user interface. The aim of building the angular material library was to build high-quality UI components, obviously build on Angular and based on Google’s material design. It offers a wide range of components like datepicker, autocomplete, tabs, spinner, date table, side menu, popups, model, snackbar and many more. Isn’t it great?

But what if your project requirement doesn’t want to follow angular material UI Principal or styles (i.e. they had their own UI, UX principle to develop the screens)?

To answer this question Angular Team has developed CDK(Component Development Kit), the aim behind CDK was to provide developers more tools to build awesome component for the web. CDK allows us to use features of angular material without adopting the material design visual language. The angular team had noticed something in common while developing some UI Component like Date Picker, Autocomplete Box, Menu, Snack Bar and etc is they all floating panel to open on the screen while the component is active. Same way for tabs and stepper they found it changes view or content dynamically. So the team had made some common API available, say for example if you want to design your own floating component you can make it by simply using overlay package. CDK comes with many packages; few of them are as follows,

Now let’s start building our first demo component. To do so first create the empty project using Angular-CLI. If you are waiting for me to write the steps for creating the new project then wait??

After creating New Projects first we need install following package

npm install @angular/cdk

 and then imports some packages to our app.module.ts file as shown below,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

import { A11yModule } from '@angular/cdk/a11y';
import { OverlayModule } from '@angular/cdk/overlay';
import { FontdialogComponent } from './fontdialog/fontdialog.component';


@NgModule({
  declarations: [
    AppComponent,
    FontdialogComponent

  ],
  imports: [
    BrowserModule,
    CommonModule,
    A11yModule,
    OverlayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then need to import some prebuilt css from CDK for structural behavior only.

So in your style.css  import following ,

/* You can add global styles to this file, and also import other style files */

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

This prebuilt CSS has nothing to deal with how floating panel will look like; it is just there for some structural behavior. Done, now we can use the CDK to develop our component.

So now go ahead and create your new component, in my case I will be creating font picker component, I will need one button and one floating panel to display my Fonts. First I will create an isOpen property on my typescript which will check the status of floating panel.

font-picker.component.ts

export class FontdialogComponent  {
  isOpen=false;
}

font-picker.component.html

<button type="button" [style.font-family]="selectedFont" cdkOverlayOrigin #x="cdkOverlayOrigin" (click)="isOpen=!isOpen">Font</button>
<ng-template cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="x"
[cdkConnectedOverlayOpen]="isOpen"
>
font-dialog
</ng-template>

So in above HTML, I had used one button to simply change the isOpen to true to false and vice versa. And ng-template to dynamically load content. Here most important is

cdkConnectedOverlay which will make that ng-template content as floating panel.

And on the button, I am saying that ‘ hey it’s the origin of that floating panel by writing cdkOverlyOrigin and giving it template reference.’

Output:

You can see the output looks like a plain text, remember as I said previously it is because CDK doesn’t have an opinion about style and it is the job of the author to write styles for the component.

Now to perform full working demo create the font-picker.component.ts as below,

export class FontpickerComponent  {

  isOpen=false;

  selectedFont='';

  fonts=[

    { name: "verdana" },

    { name: "courier" },

    { name: "Comic Sans MS" },

    { name: "Arial Black" },

    { name: "Times New Roman" },

    { name: "Georgia" },

    { name: "Blackadder ITC" }

  ];


}

Now, this content one property selectedFont i.e. the font which we select from our floating panel and apply that font-family to our welcome div.

Our font-picker.component.html will look as below,

<div [style.font-family]="selectedFont || 'Arial' " >

  <p>Welcome to ng-India</p>

  <p>India's first Angular Conference</p>

</div>


<button type="button" cdkOverlayOrigin #x="cdkOverlayOrigin" (click)="isOpen=!isOpen">Font</button>

<ng-template cdkConnectedOverlay

[cdkConnectedOverlayOrigin]="x"

[cdkConnectedOverlayOpen]="isOpen"

> 

  <div class="font-picker" >

    <div class="listfont" (click)="selectedFont=item.name;isOpen=false"  *ngFor="let item of fonts" >

      {{item.name}}

    </div>

  </div>

</ng-template>

some styling for your floating panel is as shown below, so copy this in your style.css file,

/* You can add global styles to this file, and also import other style files */


@import   '~@angular/cdk/overlay-prebuilt.css';
@import   '~@angular/cdk/a11y-prebuilt.css';
body{
  margin: 50px;
}
 button {
  height: 30px;
  width: 80px;
  font-size: 18px;
}
.font-picker{
  width: 250px;
  height: 250px;
  padding: 8px;
  box-shadow: 0 3px 1px -2px rgba(0, 0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.26);
}
.listfont{
  cursor: pointer;
  padding: 3px;
}
.listfont:hover{
  border: 2px solid black;
}

Output: