bootstrap 4 in Angular 2 dropdown not working

Question

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 <

Answer 1

i have used a different approach for getting drop down on collpased navbar.

STEP 1 Add click event on navbar toggle button

Html

    

  

    

      
        
        
        
      
      WebSiteName
    
    

      

        
Home
        

          Page 1 
          

            
Page 1-1
            
Page 1-2
            
Page 1-3
          
        
        
Page 2
        
Page 3
      
      

        
 Sign Up
        
 Login
      
    
  

Step2: implement the function inside Navbar component.ts (Above navbar html template is used inside navbar component)

import { Component} from '@angular/core';
    export class HeaderComponent  {
      buttontoggled:boolean:false;

    OnClik(){
      this.buttontoggled=!this.buttontoggled;
    }

Step 3 based on the navbar toggle button click add class show(bootstrap 4) or open for previous bootstrap versions. we can use ngClass Directive for this

Work flow

Navbar toggle button will be visible when navbar geting collapsed for smaller resolutions

by handling the button click event we can set one flag to check if the button clicked or not

Based on this flag we will we will bind the css class show to navabr div using ngClass directive