Example usage of the dropdown

<!DOCTYPE html>
<html>

  <head>
  <base href="." />
    <title>ng-bootstrap demo</title>
   
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@21.0.1/dist/styles/ag-grid.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
   
    <script src="https://unpkg.com/zone.js@^0.9.1/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@^0.9.1/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@^0.1.8/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@^0.19.40/dist/system.js"></script>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid-community":"https://unpkg.com/ag-grid-community@21.0.1/main.js","ag-grid-community/main":"https://unpkg.com/ag-grid-community@21.0.1/main.js","ag-grid-angular":"npm:ag-grid-angular@21.0.1/"};
    </script>
    <script src="config.js"></script>
    <script>
    System.import('app').catch(console.error.bind(console));
</script>
  </head>

  <body>
  <my-app>loading...</my-app>
  </body>

</html>

var ver = {
    ng: '8.2.0'
  };

  System.config({
  //use typescript for compilation
  // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  meta: {
    'typescript': {
      "exports": "ts"
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {

    'app': './src',

    '@angular/animations': 'npm:@angular/animations@' + ver.ng + '/bundles/animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations@' + ver.ng + '/bundles/animations-browser.umd.js',
    '@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common@' + ver.ng + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',
   
    'rxjs': 'npm:rxjs@~6.4.0',
    'tslib': 'npm:tslib/tslib.js',
    'typescript': 'npm:typescript@~3.4.5/lib/typescript.js',
    '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@5.1.0/bundles/ng-bootstrap.umd.js',
},
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      main: 'index.js',
      defaultExtension: 'js'
    },
    'rxjs/operators': {
      main: 'index.js',
      defaultExtension: 'js'
    }
  }
});

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

platformBrowserDynamic().bootstrapModule(AppModule);


import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';





import { NgbDropdownAppendToComponent } from './dropdown-append-to';

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid">
    <ngb-dropdown-append-to></ngb-dropdown-append-to>
  </div>
  `
})
export class App {
}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
   
  ],
  declarations: [App, NgbDropdownAppendToComponent],
  bootstrap: [App]
})
export class AppModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'ngb-dropdown-append-to',
  templateUrl: 'src/dropdown-append-to.html'
})
export class NgbDropdownAppendToComponent {
  items = [
    'Genus Gorilla',
    'Genus Homo',
    'Genus Pan',
    'Genus Pongo'
  ];

  constructor() { }


  testClick(choice) {
    console.info(choice, 'is clicked');
  }
}

<style>
  .scroll-parent.scroll-short {
    max-height: 200px;
}

.demo-scroll-padding {
    padding: 10px;
}
.scroll-parent {
    max-height: 400px;
    overflow-y: auto;
}
.border-cutout {
    border: 1px dashed #dc0a0a!important;
}
.form-group {
    margin-bottom: 1rem;
}
</style>


<div class="form-group border-cutout scroll-parent scroll-short demo-scroll-padding">
  <label class="strong-block">Note:</label>
  <ul class="list-unstyled">
    <li>Scroll within this content to see disconnected dropdown.</li>
    <li>This dropdown menu is appended to body, but the scroll event is not applied
    to the red dashed container.</li>
  </ul>
  <div ngbDropdown
       container="body"
       class="dropdown">
    <button ngbDropdownToggle
            class="btn btn-outline-primary">
      Escaped Dropdown!
    </button>
    <div ngbDropdownMenu
         class="dropdown-menu">
      <button ngbDropdownItem *ngFor="let choice of items"
              (click)="testClick(choice)"
              class="dropdown-item">
        {{choice}}
      </button>
    </div>
  </div>
  <br><br>
  <p class="emphasis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    fringilla ex eu ante lobortis, eget eleifend diam blandit. Nunc
    fringilla iaculis pretium. Suspendisse sodales sem bibendum mi rutrum,
    id condimentum lacus consectetur. Nam et varius nisi, in ornare mi.
    Proin a mollis nisl. Suspendisse pharetra ante non orci commodo
    eleifend. Nullam consectetur turpis eu nisi pretium laoreet. Sed sed
    dui justo.
  </p>
</div>