bootstrap 4 in Angular 2 dropdown not working

后端 未结 14 1200
旧巷少年郎
旧巷少年郎 2021-02-04 08:36

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 <

相关标签:
14条回答
  • 2021-02-04 09:36
    1. Please install ng-bootstrap from this link Getting Started with the following command:

      npm `install --save @ng-bootstrap/ng-bootstrap`
      
    2. Import it on app.module.ts like

      import `{NgbModule} from '@ng-bootstrap/ng-bootstrap';` 
      
    3. Import on

      imports:[
         NgbModule.forRoot(),
      ]
      
    4. Add ngbDropdown on dropdown

    5. Add ngbDropdownToggle on dropdown Toggle DOM

    6. 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>
      
    0 讨论(0)
  • 2021-02-04 09:37
    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');
        }
      }
    
    }
    
    0 讨论(0)
提交回复
热议问题