I have followed the following to install bootstrap 4 into my Angular 2 project: Accepted Answer, following the first 1,2,3 and 4 steps
However when I add the following <
Please install ng-bootstrap from this link Getting Started with the following command:
npm `install --save @ng-bootstrap/ng-bootstrap`
Import it on app.module.ts
like
import `{NgbModule} from '@ng-bootstrap/ng-bootstrap';`
Import on
imports:[
NgbModule.forRoot(),
]
Add ngbDropdown
on dropdown
Add ngbDropdownToggle
on dropdown Toggle DOM
Add ngbDropdownMenu
on dropdown menu DOM
<li ngbDropdown class="nav-item dropdown" >
<a ngbDropdownToggle class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
import { Directive, HostListener, HostBinding, ElementRef } from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
constructor(private _el: ElementRef) {
}
@HostBinding('class.show') isOpen = false;
@HostListener('click') toggleOpen(){
this.isOpen=!this.isOpen;
if(this.isOpen){
this._el.nativeElement.querySelector('.dropdown-menu').classList.add('show');
}
else{
this._el.nativeElement.querySelector('.dropdown-menu').classList.remove('show');
}
}
}