ngx-bootstrap-icons-picker's Introduction

Angular Bootstrap Icons Picker

By Google Developers Group Valle d'Aosta

This icon picker manages the free, high quality, open source Bootstrap Icons library.

Angular Bootstrap Icons Picker for:

Versions compatibility:

Angular 17 -> ^17.0.0
Angular 16 -> @todo
Angular 15 -> @todo
Angular 14 -> ^14.0.0

Largely inspired by ngx-icon-picker

Installing and usage

With Angular CLI

ng add ngx-bootstrap-icons-picker

Or with NPM

npm install ngx-bootstrap-icons-picker --save

Load the module for your app

import {NgxBootstrapIconsPickerModule} from "ngx-bootstrap-icons-picker";

@NgModule({
  // ...
  imports: [
  // ...
    NgxBootstrapIconsPickerModule
  ]
})

Use it in your template

<div class="input-group mb-3">
  <span class="input-group-text"><i class="bi bi-{{selectedIcon}}"></i></span>
  <input type="text" class="form-control"
         [iconPicker]="'terminal-fill'"
         [value]="selectedIcon"
         (iconPickerSelect)="onIconPickerSelect($event)"
  />
</div>

Component property and methods

export class AppComponent {
  selectedIcon:string = ''

  onIconPickerSelect(icon:string):void{
    this.selectedIcon = icon;
  }
}

Available inputs and output :

  [iconPicker]                // The icon to select in the grid.

  [bipWidth]                  // Use this option to set icon picker dialog width (default:'270px')
  [bipHeight]                 // Use this option to force icon picker dialog height (default:'auto')
  [bipMaxHeight]              // Use this option to force icon picker dialog max-height (default:'180px')

  [bipIconSize]               // Set the icon size in the selector (default:'18px')
  [bipIconVerticalPadding]    // Set the top and bottom padding (default:'6px') 
  [bipIconHorizontalPadding]  // Set the left and right button padding (default:'9px') 
  [bipKeepSearchFilter]       // The search filter keep the value to filter (default:'false')    

  [bipPosition]               // Dialog position: 'right', 'left', 'top', 'bottom'(default: 'bottom')
  [bipFallbackIcon]           // Is used when the icon is undefined (default:'github')
  [bipPlaceHolder]            // Search input placeholder (default:'Search icon..')

  (iconPickerSelect)          // Event on selected icon value change

To integrate the icon picker with another framework instead of bootstrap, you have to use the extra inputs:

  [bipButtonStyleClass]       // To override the bootstrap class for the button
  [bipDivSearchStyleClass]    // To override the bootstrap class for the div search
  [bipInputSearchStyleClass]  // To override the bootstrap class for the input search

Developers

Maintainer

Manuel Zavatta

Contributors

We Want You!

ngx-bootstrap-icons-picker's People

Contributors

Stargazers

Watchers

ngx-bootstrap-icons-picker's Issues

Angular 17 Support

Hi Team,

Can you add angular 17 support. Currently with Angular 17 its failing to install.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^17.0.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.2.0" from [email protected]
npm ERR! node_modules/ngx-bootstrap-icons-picker
npm ERR! ngx-bootstrap-icons-picker@"1.0.8" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.