I have this code:
Component html:
<td>
<div ngbDropdown class="d-inline-block">
<a ngbDropdownToggle>
<fa-icon [icon]="faEllipsis"></fa-icon>
</a>
<div ngbDropdownMenu 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>
</td>
Component ts:
import { Component, Input, OnInit } from '@angular/core';
import { Group } from "../../../common/models/Group";
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: '[study-groups-row]',
templateUrl: './study-groups-row.component.html',
styleUrls: ['./study-groups-row.component.css']
})
export class StudyGroupsRowComponent implements OnInit {
@Input() group: Group;
faEllipsis = faEllipsisV;
constructor() {
}
ngOnInit() {
}
}
and this in my module:
@NgModule({
declarations: [
AppComponent,
StudyComponent,
PageNotFoundComponent,
CreateNewStudyComponent,
LoadingBackgroundComponent
],
imports: [
BrowserModule,
FormsModule,
NgbModule,
HttpClientModule,
FontAwesomeModule,
AppRoutingModule,
StudyModule
],
bootstrap: [AppComponent],
providers: [
]
})
export class AppModule {
constructor() {
library.add(faSpinner, faSave, faAngleDown);
}
}
I have this in my package.json:
"@angular/core": "~7.2.0",
"bootstrap": "^4.2.1",
"@ng-bootstrap/ng-bootstrap": "^4.0.1",
It compiles without error and there are not errors in console but dropdown don't work? There are no bootstrap classes added? Should they be added dynamically by directives?
I've added breakpoint in vendor.js in line:
var NgbDropdownMenu = /** @class */ (function () {
function NgbDropdownMenu(dropdown, _elementRef, _renderer) {
but it don't paused when I've refreshed the page. My angular.json have boostrap css and it's loaded.
What I've missed? Docs say that you only need add import into ngModule.
EDIT: docs say that it support Angular 7.0.0 I was using 7.2. I've downgraded to 7.0 but it still don't work. I've tried to add first component from docs (Accordion) and got this error now (dropdown give no visible indication that it's running):
Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("<ngb-accordion [ERROR ->]#acc="ngbAccordion" activeIds="ngb-panel-0">
<ngb-panel title="Simple">
<ng-template ngbPanelCo"): ng:///StudyModule/StudyGroupsComponent.html@0:15
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
[ERROR ->]<ngb-panel title="Simple">
<ng-template ngbPanelContent>
Anim pariatur cliche reprehenderit"): ng:///StudyModule/StudyGroupsComponent.html@1:2
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ng-template>
</ngb-panel>
[ERROR ->]<ngb-panel>
<ng-template ngbPanelTitle>
<span>★ <b>Fancy</b> title ★</span>
"): ng:///StudyModule/StudyGroupsComponent.html@11:2
'ngb-accordion' is not a known element:
1. If 'ngb-accordion' is an Angular component, then verify that it is part of this module.
2. If 'ngb-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
<ngb-panel title="Simple">
<ng-temp"): ng:///StudyModule/StudyGroupsComponent.html@0:0
at syntaxError (compiler.js:2547)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
at compiler.js:24971
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
at compiler.js:24881
at Object.then (compiler.js:2538)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)
Vendor.js have this code:
NgbAccordion.decorators = [{
type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],
args: [{
selector: 'ngb-accordion',
exportAs: 'ngbAccordion',
host: {
'class': 'accordion',
'role': 'tablist',
'[attr.aria-multiselectable]': '!closeOtherPanels'
},
template: "\n <ng-template ngFor let-panel [ngForOf]=\"panels\">\n <div class=\"card\">\n <div role=\"tab\" id=\"{{panel.id}}-header\" [class]=\"'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')\">\n <h5 class=\"mb-0\">\n <button type=\"button\" class=\"btn btn-link\"\n (click)=\"toggle(panel.id)\" [disabled]=\"panel.disabled\" [class.collapsed]=\"!panel.isOpen\"\n [attr.aria-expanded]=\"panel.isOpen\" [attr.aria-controls]=\"panel.id\">\n {{panel.title}}<ng-template [ngTemplateOutlet]=\"panel.titleTpl?.templateRef\"></ng-template>\n </button>\n </h5>\n </div>\n <div id=\"{{panel.id}}\" role=\"tabpanel\" [attr.aria-labelledby]=\"panel.id + '-header'\"\n class=\"collapse\" [class.show]=\"panel.isOpen\" *ngIf=\"!destroyOnHide || panel.isOpen\">\n <div class=\"card-body\">\n <ng-template [ngTemplateOutlet]=\"panel.contentTpl?.templateRef\"></ng-template>\n </div>\n </div>\n </div>\n </ng-template>\n "
}]
}];
NgbModule is added to main Module.