I am working with NgbDropdown and have the following code snippet:
<div ngbDropdown class="d-flex justify-content-end">
<button class="btn" id="dropdownMenu" ngbDropdownToggle>Toggle
dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownMenu">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
https://i.sstatic.net/V5azE.png
Everything works fine until I try to use it in a child component like this:
navbar.component.html
<div ngbDropdown class="d-flex justify-content-end">
<button class="btn" id="dropdownMenu" ngbDropdownToggle>Toggle
dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownMenu">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html'
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
When I try to use this component in a parent component such as app.component.ts,
<app-navbar></app-navbar>
It does not seem to work, there are no binding errors in the console and the build is successful. https://i.sstatic.net/h2nva.png