Components

Dropdown

Importing:

@NgModule({
  imports: [GbDropdownModule]
})

Using:

<gb-dropdown>
   <gb-dropdown-item>
     Item_1
   </gb-dropdown-item>
   <gb-dropdown-item>
     Item_2
   </gb-dropdown-item>
 </gb-dropdown>

Notification

Importing:

@NgModule({
  imports: [GbNotificationModule]
})

Using:

constructor(private notificationService: GbNotificationService) {
    this.showNotification();
}

public showNotification() {
    this.notificationService.createNotification('Notification text', NotificationType.INFO, 3000);
}

Popover

Importing:

@NgModule({
  imports: [GbPopoverModule]
})

Using:

<div #popoverElement>
  Popover
</div>
<popover [element]="popoverElement">
  Popover
</popover>

Modal window

@NgModule({
  imports: [GbModalWindowModule.forRoot()]
})

Modal in template:

<button (click)="openModalWithId('modalWindow')">
  Open modal
</button>

<button (click)="openModalWithComponent(modalWindow)">
  Open modal component
</button>

<gb-modal-window #modalWindow
                 modalId="modalWindow"
                 [title]="'Modal title'">
  <div modal-body>
    Modal body
  </div>
  <div modal-footer>
    Modal footer
  </div>
</gb-modal-window>

constructor(public modalService: GbModalWindowService) {
}

public openModalWithId(id: string): void {
    this.modalService.openModal(id);
}

public openModalWithComponent(modal: GbModalWindowComponent): void {
    this.modalService.openModal(modal);
}

Modal as a component:

export class ModalComponent extends GbModalWindow<InputData, OutputData> {

  public data: InputData;

  constructor() {
    super();
  }

  public setData(data: InputData): any {
    this.data = data;
  }

  public save(): void {
    this.selected.next(outputData as OutputData);
  }
}

<gb-modal-window [title]="'Modal window'">
  <div modal-body>
   Modal body
  </div>
  <div modal-footer>
    <button (click)="close()">
      Close
    </button>
    <button (click)="save()">
      Save
    </button>
  </div>
</gb-modal-window>

constructor(public modalService: GbModalWindowService) {
}

public openModalComponent(): void {
    this.modalService.openModalComponent(ModalComponent);
}

Settings:

GbModalWindowSettings

padding: boolean;
closable: boolean;
closeOnOutsideClick: boolean;
hasBackground: boolean;
type: ModalType;

<gb-modal-window [settings]="settings"></gb-modal-window>

modalWindow.open(settings);

Context menu

Importing:

@NgModule({
  imports: [GbContextMenuModule]
})

Using:

<div gbContextMenu>
  Context menu container
  <gb-context-menu>
    Context menu content
  </gb-context-menu>
</div>

Pipes

Importing:

@NgModule({
  imports: [GbPipesModule]
})

Highlight

Map Values

New Array

Object keys

Safe html

Object values

Directives

Importing:

@NgModule({
  imports: [GbDirectivesModule]
})

Click outside

Lifecycle

Stop propagation

Number