@wizsolucoes WizTags

Modulo Angular 4+

Configuração do módulo (app.module.ts)

Antes de utilizar os recursos deste módulo será necessário realizar a seguinte configuração no arquivo app.module.ts do seu projeto

import { WizTagsModule } from '@wizsolucoes/wiz-tags';

@NgModule({
  declarations: [],
  imports: [
    WizTagsModule,
  ]

Chamando componente no HTML (.component.html)

Chamando o componente no html

    <wiz-tags 
        label="lorem lorem lorem lorem lorem lorem " 
        (closeTagEvent)="teste('teste')">
    </wiz-tags>

Chamando o componente no html com todas as propriedades

  <wiz-tags 
    backgroundColor="transparent"  
    labelColor="#ff9100"
    btnCloseColor = "#ff9100"
    borderColor="#ff9100"
    btnClose="true"
    label="lorem lorem lorem lorem lorem lorem "
    imgUrl= "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTaMYjy8NeglGI2sXH4QTkRBh28p2SaXFIttYpcWZ_LV68oQaOO"
    type = "chips"
    size = "size-lg"
    (closeTagEvent)="teste('teste')"
>
</wiz-tags>

backgroundColor: Trocar cor do background da tag exemplo:

  backgroundColor="red"  
  backgroundColor="transparent"
  backgroundColor="#fff"   

labelColor: Trocar cor da label da tag exemplo:

  labelColor="#ff9100"
  labelColor="red"

btnClose: Habilitar ou desabilitar botão de fechar tag

  btnClose="true"
  btnClose="false"

colorBtnClose: Trocar cor do botão de fechar tag

  btnCloseColor = "#ff9100"
  btnCloseColor="red"

label: Titulo que vai aparecer na tag (obs.) limite máximo de 15 caracteres caso ultrapasse é adicionado (...)

  label="lorem lorem lorem lorem lorem lorem "
  label="lorem"

imgUrl: O componente de tag suporta a inclusão de avatar basta chamar a propriedade e passar a url/caminho da img

    imgUrl= "https://encrypted-tbn0.gstatic.com/images? q=tbn%3AANd9GcTaMYjy8NeglGI2sXH4QTkRBh28p2SaXFIttYpcWZ_LV68o QaOO"
    imgUrl="../assets/img.jpg"

type: o componente de tags suporta 2 formatos (Chips/Tags) basta passar: (Obs.) por padrão ele já vem pre definido com o formato chips;

    type = "chips"
    type = "tags"

size: O componente tem 3 tamanhos pré definidos: SM/MD/LG

    size = "size-sm"
    size = "size-md"
    size = "size-lg"

(closeTagEvent): Nome da funcao chamada no ts exemplo:

  teste(e) {
    console.log(e);
  }