Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ng-bootstrap/ng-bootstrap

Package Overview
Dependencies
Maintainers
5
Versions
152
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ng-bootstrap/ng-bootstrap

Angular powered Bootstrap

  • 17.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
558K
decreased by-12.88%
Maintainers
5
Weekly downloads
 
Created

What is @ng-bootstrap/ng-bootstrap?

@ng-bootstrap/ng-bootstrap provides Angular widgets built from the ground up using Bootstrap 4 CSS. It allows developers to use Bootstrap components natively in Angular applications without the need for jQuery.

What are @ng-bootstrap/ng-bootstrap's main functionalities?

Accordion

The Accordion component allows you to create collapsible panels. The example demonstrates a simple accordion with two panels, one titled 'Simple' and the other 'Advanced'.

<ngb-accordion [closeOthers]="true">
  <ngb-panel title="Simple">
    <ng-template ngbPanelContent>
      This is a simple accordion panel.
    </ng-template>
  </ngb-panel>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>Advanced</span>
    </ng-template>
    <ng-template ngbPanelContent>
      This is an advanced accordion panel.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Modal

The Modal component allows you to create and control modal dialogs. The example demonstrates a button that opens a modal with a title, body, and footer.

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal',
  template: `<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Hello, world!</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>`
})
export class ModalComponent {
  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
      console.log(`Closed with: ${result}`);
    }, (reason) => {
      console.log(`Dismissed ${reason}`);
    });
  }
}

Tooltip

The Tooltip component allows you to add tooltips to elements. The example demonstrates a button with a tooltip that appears on top when hovered.

<button type="button" class="btn btn-outline-secondary" ngbTooltip="Tooltip on top" placement="top">Tooltip on top</button>

Datepicker

The Datepicker component allows you to add a date selection widget. The example demonstrates a simple datepicker bound to a model.

<ngb-datepicker [(ngModel)]="model"></ngb-datepicker>

Other packages similar to @ng-bootstrap/ng-bootstrap

Keywords

FAQs

Package last updated on 28 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc