ng-bubble-input v0.2.7

ng-bubble-input

1. Demo
2. Usage
3. Styles
4. Events

Demo

https://stackblitz.com/edit/ng-bubble-input?devtoolsheight=33&file=src/app/app.module.ts

Usage

<div style="width: 250px">
  <ng-bubble-input></ng-bubble-input>
</div>

Add NgBubbleInputModule in app.module.ts

import { NgBubbleInputModule } from 'ng-bubble-input';

@NgModule({
  imports:[ 
    ...,
    NgBubbleInputModule],
    ...
})

Styles

::ng-deep.ng-bubble-input-box{
' rewrite styles'
  .ng-bubble-item{
    'rewrite styles'
    .ng-bubble-remove{
      'rewrite styles'
    }
  }
  .ng-bubble-input{
    'rewrite styles'
  }
}

You can use you custom class name for styling bubble-input

<div style="width: 250px">
  <ng-bubble-input 
    [defaultClass]="'my-custom-class'">
  </ng-bubble-input>
</div>

::ng-deep.my-custom-class{
'some custom styles'
  .ng-bubble-item{
    'some custom styles'
    .ng-bubble-remove{
      'some custom styles'
    }
  }
  .ng-bubble-input{
    'some custom styles'
  }
}

⬆ back to top

Events

<div style="width: 250px">
  <ng-bubble-input
    (change)="onChange(event)"
    (delete)="onDelete(event)">
  </ng-bubble-input>
</div>

onChange(list) {
  console.log(list);
}

onChange(list) {
  console.log(list);
}

Output value

// array of strings - "I'm", "bubble", "input"

⬆ back to top