AlexanderKozhevin

  <fab  icon="icons/basic/basic_todo.svg" type="btn-danger"></fab>
  <fab  icon="icons/basic/basic_star.svg" type="btn-primary"></fab>
  <fab  icon="icons/basic/basic_mail.svg" stroke="black" type="btn-default"></fab>
  <fab  icon="icons/basic/basic_printer.svg" type="btn-warning"></fab>
  <fab  icon="icons/basic/basic_paperplane.svg" type="btn-success"></fab>

AlexanderKozhevin

<ng2-smart-table
  [settings]="content.tablesettings"
  [source]="source"
  (deleteConfirm)="onDeleteConfirm($event)"
  (editConfirm)="onSaveConfirm($event)"
  (createConfirm)="onCreateConfirm($event)"></ng2-smart-table>
  


  source: LocalDataSource;

AlexanderKozhevin

<p>A typeahead example that uses a formatter function for string results</p>

<label for="typeahead-format">Search for a state:</label>
<input id="typeahead-format" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultFormatter]="formatter" />
<hr>
<pre>Model: {{ model | json }}</pre>



const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',

AlexanderKozhevin

<button type="button" class="btn btn-secondary" placement="top" ngbTooltip="Tooltip on top">
    Tooltip on top
  </button>
  <button type="button" class="btn btn-secondary" placement="right" ngbTooltip="Tooltip on right">
    Tooltip on right
  </button>
  <button type="button" class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip on bottom">
    Tooltip on bottom
  </button>
  <button type="button" class="btn btn-secondary" placement="left" ngbTooltip="Tooltip on left">

AlexanderKozhevin

<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
  <hr>
  <pre>Selected time: {{time | json}}</pre>
  

AlexanderKozhevin

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
      master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab>

AlexanderKozhevin

 <ngb-rating [(rate)]="currentRate"></ngb-rating>
  <br>
  <ngb-rating [(rate)]="currentRate">
    <ng-template let-fill="fill2">
      <span class="star2" [class.filled2]="fill2 === 100">&#9733;</span>
    </ng-template>
  </ngb-rating>
  <br>
  <ng-template #t let-fill="fill">
    <span *ngIf="fill === 100" class="star full">&hearts;</span>

AlexanderKozhevin

<p><ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar></p>
<p><ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar></p>
<p><ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar></p>
<p><ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar></p>

AlexanderKozhevin

<button type="button" class="btn btn-secondary" placement="top"
          ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
    Popover on top
  </button>

  <button type="button" class="btn btn-secondary" placement="right"
          ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on right">
    Popover on right
  </button>

AlexanderKozhevin

 <div>Default pagination</div>
    <ngb-pagination [collectionSize]="70" [(page)]="page" aria-label="Default pagination"></ngb-pagination>

    <div>directionLinks = false</div>
    <ngb-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></ngb-pagination>

    <div>boundaryLinks = true</div>
    <ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>

    <hr>