ceph-dashboard documentation
  1. Components
  2. SelectBadgesComponent

File

src/app/shared/components/select-badges/select-badges.component.ts

Metadata

selector cd-select-badges
styleUrls ./select-badges.component.scss
templateUrl ./select-badges.component.html

Index

Properties
Inputs
Outputs

Constructor

constructor(i18n: I18n)
Defined in src/app/shared/components/select-badges/select-badges.component.ts:33
Parameters :
Name Type Optional
i18n I18n No

Inputs

customBadges
Default value : false
Defined in src/app/shared/components/select-badges/select-badges.component.ts:25
customBadgeValidators
Type : ValidatorFn[]
Default value : []
Defined in src/app/shared/components/select-badges/select-badges.component.ts:27
data
Type : Array<string>
Default value : []
Defined in src/app/shared/components/select-badges/select-badges.component.ts:17
messages
Type : SelectMessages
Default value : new SelectMessages({}, this.i18n)
Defined in src/app/shared/components/select-badges/select-badges.component.ts:21
options
Type : Array<SelectOption>
Default value : []
Defined in src/app/shared/components/select-badges/select-badges.component.ts:19
selectionLimit
Type : number
Defined in src/app/shared/components/select-badges/select-badges.component.ts:23

Outputs

selection
Type : EventEmitter
Defined in src/app/shared/components/select-badges/select-badges.component.ts:30

Properties

cdSelect
Decorators :
@ViewChild('cdSelect')
Defined in src/app/shared/components/select-badges/select-badges.component.ts:33
 
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ValidatorFn } from '@angular/forms';

import { I18n } from '@ngx-translate/i18n-polyfill';
import * as _ from 'lodash';

import { SelectMessages } from '../select/select-messages.model';
import { SelectOption } from '../select/select-option.model';

@Component({
  selector: 'cd-select-badges',
  templateUrl: './select-badges.component.html',
  styleUrls: ['./select-badges.component.scss']
})
export class SelectBadgesComponent {
  @Input()
  data: Array<string> = [];
  @Input()
  options: Array<SelectOption> = [];
  @Input()
  messages = new SelectMessages({}, this.i18n);
  @Input()
  selectionLimit: number;
  @Input()
  customBadges = false;
  @Input()
  customBadgeValidators: ValidatorFn[] = [];

  @Output()
  selection = new EventEmitter();

  @ViewChild('cdSelect')
  cdSelect;

  constructor(private i18n: I18n) {}
}

<cd-select #cdSelect
           [data]="data"
           [options]="options"
           [messages]="messages"
           [selectionLimit]="selectionLimit"
           [customBadges]="customBadges"
           [customBadgeValidators]="customBadgeValidators"
           elemClass="margin-right-sm select-menu-edit"
           (selection)="selection.emit($event)">
  <i class="fa fa-fw fa-pencil"></i>
</cd-select>

<span *ngFor="let dataItem of data">
  <span class="badge badge-pill badge-primary margin-right-sm">
    <span class="margin-right-sm">{{ dataItem }}</span>
    <a class="badge-remove"
       (click)="cdSelect.removeItem(dataItem)">
      <i class="fa fa-times"
         aria-hidden="true"></i>
    </a>
  </span>
</span>

./select-badges.component.scss 

@import '../../../../defaults';

::ng-deep .select-menu-edit {
  margin-left: -20px;
}
.badge-remove {
  color: $color-solid-white;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""