@techotto/auto-complete-component v0.0.6

✨ Otto Autocomplete

Baseado em uma entrada de texto o componente sugere opções filtradas para seleção..

Como usar

instala o pacote

npm i @techotto/otto-auto-complete-component

Passo 1 - app.module.ts

Deve ser adicionado no arquivo app.module a inclusão de CUSTOM_ELEMENTS_SCHEMA

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

Adicione no final do @NgModule

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Passo 2 - main.ts

import { defineCustomElements as ottoAutoComplete } from '@techotto/otto-autocomplete/loader';

no final do arquivo main.ts você chama o que importou

ottoAutoComplete()

Componente html

  <otto-autocomplete data='[{
          "email":"hugo@teste.com.br",
          "name":"Hugo Ricchino"
        },
        {
          "email":"thais@teste.com.br",
          "name":"Thais"
        },
        {
          "email":"mauricio@teste.com.br",
          "name":"Mauricio"
        }]' search-result='data.name' search-item='data.name' (returnAutoComplete)="returnAutoComplete($event)" placeholder='Pesquisar'>
  </otto-autocomplete>

  // variable = boolean;

Obs: Se estiver trabalhando com algum framework e seus parâmetros forem dinâmicos devem ser feitos em forma diferente dependendo do framwork assista o vídeo abaixo para entender melhor. Web Componentes atributos em framework

🧾 Parâmetros

Projeto fase beta, ajude contribuindo nesse projeto para melhorar! :ok_hand: