если вы не хотите добавлять jquery, pooper и bootstrap JS в ваш проект, вы можете сделать это, я добавил пример navbar и btn-group
объяснение
show class is use to show menu of dropdown
при нажатии на тег anchor , show переменная с переключением, которая содержит логический тип (указанный в файле .ts ). в момент времени div.dropdown-menu проверить наличие show class и если его значение false, он не может быть показан или наоборот.
app.component.html
В навигационной панели
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">List 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">List 2</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" (click)="show=!show">Dropdown</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" [ngClass]="{show: show === true}">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
В бтн-группе
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" (click)="show=!show">Action</button>
<div class="dropdown-menu" [ngClass]="{show: show === true}">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
app.component.ts
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
show: boolean = false;
constructor() {}
ngOnInit() {}
}