angular에서 ngx-bootstrap 사용 시 bootstrap dropdown 사용하기. standalone 모드
출처 : https://www.udemy.com/share/101Wh23@Iq5N4oqNYBF15gjfNXB6Mlnl7kmNO47fv0RpNWr2OEUUHZjc1_Tfg2BTyDFu-OMzyw==/
예제 소스 : https://github.com/tigersarang/angDrowdown
1. bootstrap, ngx-bootstrap 설치하기
npm install ngx-bootstrap bootstrap
2. angular.json에 css 추가하기
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],
3. app.config.ts에 다음 추가
import {provideAnimations} from '@angular/platform-browser/animations';
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
provideAnimations()
]
4. app.component.ts에 BsDropdownModule 추가하기
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@Component({
selector: 'app-nav',
imports: [BsDropdownModule],
templateUrl: './nav.component.html',
styleUrl: './nav.component.css'
})
5. app.component.html에 drowdown 추가하기
<li class="nav-item dropdown" dropdown>
<a class="nav-link dropdown-toggle" dropdownToggle href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" *dropdownMenu>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>