AlexanderKozhevin

 <ng-template #content let-c="close" let-d="dismiss">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>

AlexanderKozhevin

<div class="row">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>

AlexanderKozhevin

<ngb-datepicker #dp [(ngModel)]="today" (navigate)="date = $event.next"></ngb-datepicker>
    

AlexanderKozhevin

  <p>
    <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
      Toggle
    </button>
  </p>
  <div id="collapseExample" [ngbCollapse]="isCollapsed">
    <div class="card">
      <div class="card-block">
        You can collapse this card by clicking Toggle

AlexanderKozhevin

 <ngb-carousel>
    <ng-template ngbSlide>
      <img src="/assets/images/brenda.jpg" alt="Random first slide">
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <img src="/assets/images/brooke.jpg" alt="Random second slide">

AlexanderKozhevin

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary" [class.active]="model.left">
      <input type="checkbox" [(ngModel)]="model.left"> Left (pre-checked)
    </label>
    <label class="btn btn-primary" [class.active]="model.middle">
      <input type="checkbox" [(ngModel)]="model.middle"> Middle
    </label>
    <label class="btn btn-primary" [class.active]="model.right">
      <input type="checkbox" [(ngModel)]="model.right"> Right
    </label>

AlexanderKozhevin

 <p *ngFor="let alert of alerts">
      <ngb-alert [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
    </p>
    <p>
      <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
    </p>

AlexanderKozhevin

  <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="Simple">
     <ng-template ngbPanelContent>
       Sample content
     </ng-template>
    </ngb-panel>
    <ngb-panel>
     <ng-template ngbPanelTitle>
       <span>&#9733; <b>Fancy</b> title &#9733;</span>

AlexanderKozhevin

 {
    type: 'Pie',
    data: Chartdata['Pie'],
    options: {
      donut: true,
      showLabel: true,
      height: '100%',
      width: '100%',
      chartPadding: {
        top: 20,

AlexanderKozhevin

{
    type: 'Pie',
    data: Chartdata['Pie'],
    options: {
      donut: true,
      donutWidth: 60,
      startAngle: 270,
      total: 200,
      showLabel: true,
      width: '100%',