ng-bootstrap

I am using NgbTypeahead component of ng-bootstrap. My problem is, when I put the typeahead component inside a scrollable component and make a scroll down, the position of dropdown container doesn't change. <div style="height: 300px; overflow-y: auto;"> ... <input id="typeahead-template" type="text" class="form-control [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt [inputFormatter]="formatter" /> ... </div> It could be a small CSS issue but I could not find the solution. Here is the plunkr : http://plnkr.co/edit/rxOhDy72YWlLy9U4Ujcd?p=preview Type in a character in the text

I'm using Anuglar 6 I have two components account and profile . account component is added to the app-component . I want to open up profile-component on click of a button from account-component . But this is giving me an error Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents? the app-module looks like @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent, AccountComponent, ProfileComponent ], entryComponents: [ ProfileComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } Here is the

Has anyone used ng-bootstrap and come across the following error with angular 6 I have included imports:[NgbModule] providers: [NgbModule, NgbModalRef] in the app.module.ts file inside my ts component file i have imported import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap"; constructor(private formBuilder: FormBuilder, private modalService: NgbModal, private activeModel: NgbModalRef, private readonly resourceService: ResourceService, private readonly authService: AuthService, private readonly userService: UserService, private readonly competitionService: CompetitionService){}

I started using the ng-bootstrap Typeahead component and I'm pretty happy with that. One thing I would like to achieve is to get the dropdown items to have the same width as the input field, while the default behavior applies a width accordingly to the text length. It should be basic CSS... I created a basic Example in Plunker. As you can note, the applied style is ignored: .dropdown-menu { width: 100%;} While if I use browser dev tools, and apply the same it is applied. Any idea on how to achieve the result, by using CSS? Add encapsulation: ViewEncapsulation.None to the component import

I'm making use of ng-bootstrap's ngbDatepicker in a Reactive Form in an Angular2 project, and the dates are optional, however ngbDatepicker always marks the form as Invalid unless a date is selected. Is there a way to exclude ngbDatepicker from the form validation, or to configure it so that it returns Valid whether it has a value set or not? The issue was with how I was initializing the form values. I was setting the default values to empty strings where I should have been initializing the dates to null. So I was doing this: replicantForm = this.fb.group({ name: ['', Validators.required],

How to pass form array index to getCities function in ng-bootstrap typehead including current input text. Consider 3 is form array index. address.component.html <input name="city" type="text" id="city" formControlName="city" [ngbTypeahead]="getCities"> address.component.ts getCities = (text$: Observable<string>) => text$ .debounceTime(300) .distinctUntilChanged() .switchMap(query => query.length < 2 ? [] : this.apiService.getCities(query).catch(() => { return Observable.of([]); });) It sounds like you are needing to pass an additional parameter to the ngbTypeahead function (be it an index

I can't hide the ngb-carousel indicators and prev-next control trough the css, targeting the css class wouldn't work. Is there any option to hide it? In order to affect the css of the ng-bootstrap components, you have to disable ViewEncapsulation. Import it from @angular/core: import { ViewEncapsulation } from '@angular/core' Then disable it for this component in the @Component declaration: @Component({ encapsulation: ViewEncapsulation.None, selector: 'your-template-name', styleUrls: ['your-template-name.component.scss'], template: ` ... ` }) Then you can target the Bootstrap classes etc. as

I'm new with Angular, and i have a problem while trying the simple example with ng-bootstrap modal. I just tried to have a window open and instead it appears in my application. I'd like to have a new window open as it is explained in the ng-bootstrap example. I am using: - Angular 4.0.0 - Bootstrap 4.0.0-alpha.6 - @ng-bootstrap/ng-bootstrap 1.0.0-alpha.22 I have in my file.html : <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