Expected behavior First time, when I click drowndown menu in Navbar, It works fine. However, after clicking menu item, I try to show another NavBar with a dropdown menu. But when I click it, it does not show dropdown menu.
Actual behavior I want to show the dropdown menu in the second Navigation Bar. Resources (screenshots, code snippets etc.)

the First Component

            <!-- 사용자 profile dropdopw menu -->
            <li *ngIf="isAuth" class="nav-item dropdown" dropdown>
                <a dropdownToggle type="button" class="nav-link dropdown-toggle border border-light rounded font-weight-bold text-white waves-light">
                    <mdb-icon fas icon="user-circle"></mdb-icon>
                    <span> {{ this.userInfo.name }} </span>

                </a>
                <div class="dropdown-menu dropdown dropdown-primary dropdown-menu-right" role="menu">
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openProfileModal()">
                            <mdb-icon far icon="user-circle"></mdb-icon>
                            <span>  Profile</span>
                    </button>
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openSignUpModal()">
                            <mdb-icon fas icon="tachometer-alt"></mdb-icon>
                            <span>  Order History</span>
                    </button>
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openLogoutModal()">
                            <mdb-icon fas icon="sign-out-alt"></mdb-icon>
                            <span>  Logout</span>
                    </button>

                </div>
            </li>

            <!-- 사용자 login/signup dropdown menu  -->
            <li *ngIf="!isAuth" class="nav-item dropdown" dropdown>
                <a dropdownToggle class="nav-link dropdown-toggle border border-light rounded font-weight-bold text-white black-darker-hover waves-light" mdbWavesEffect>
                    <mdb-icon fas icon="sign-in-alt"></mdb-icon>
                    <span class="clearfix d-none d-sm-inline-block"> Login</span>
                </a>
                <div class="dropdown-menu dropdown-indigo" role="menu">
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openSignInModal()">
                            <mdb-icon fas icon="sign-in-alt"></mdb-icon>
                            <span>  SignIn</span>
                </button>
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openSignUpModal()">
                            <mdb-icon fas icon="sign-out-alt"></mdb-icon>
                            <span>  SignUp</span>
                </button>
                </div>
            </li>
            <!-- Dropdown -->

2) the second component

            <li class="nav-item dropdown" dropdown>
                <a dropdownToggle class="nav-link dropdown-toggle" mdbWavesEffect>
                    <mdb-icon fas icon="sign-in-alt"></mdb-icon>
                    <span class="clearfix d-none d-sm-inline-block">{{ this.userInfo.name }}</span>
                </a>
                <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openSignInModal()">
                                <mdb-icon fas icon="sign-in-alt"></mdb-icon>
                                <span>  Contact</span>
                        </button>
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openSignUpModal()">
                                    <mdb-icon fas icon="sign-out-alt"></mdb-icon>
                                    <span>  Account</span>
                    </button>
                    <button class="dropdown-item font-weight-bold blue-grey-text" data-toggle="modal" (click)="openSignUpModal()">
                            <mdb-icon fas icon="sign-out-alt"></mdb-icon>
                            <span>  Logout</span>
                    </button>
                </div>