Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de Autocompletar Angular 10

 En este ejemplo, aprenderemos cómo construir un ejemplo de autocompletado de Angular 10.

Necesitaremos tener algunos requisitos previos para este tutorial, como Node.js y Angular CLI v10 instalados en nuestra máquina de desarrollo local.

A continuación, deberá crear un proyecto con el siguiente comando:

$ ng new Angular10AutoCompleteExample

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

Instalación de Angular-Ng-Autocomplete

A continuación, deberá navegar a la carpeta de su proyecto e instalar la angular-ng-autocompletebiblioteca:

$ cd Angular10AutoCompleteExample
$ npm install angular-ng-autocomplete

Importando el AutocompleteLibModule

A continuación, abra el archivo src / app / app.module.ts e impórtelo AutocompleteLibModuley agréguelo en la importsmatriz "

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {AutocompleteLibModule} from 'angular-ng-autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AutocompleteLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Eso es todo, ahora puede usarlo angular-ng-autocompleteen sus componentes.

Añadiendo la función Auto Complete a nuestra aplicación Angular 10

Abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  keyword = 'name';
  public countries = [
    {
      id: 1,
      name: 'Albania',
    },
    {
      id: 2,
      name: 'Belgium',
    },
    {
      id: 3,
      name: 'Denmark',
    },
    {
      id: 4,
      name: 'Montenegro',
    },
    {
      id: 5,
      name: 'Turkey',
    },
    {
      id: 6,
      name: 'Ukraine',
    },
    {
      id: 7,
      name: 'Macedonia',
    },
    {
      id: 8,
      name: 'Slovenia',
    },
    {
      id: 9,
      name: 'Georgia',
    },
    {
      id: 10,
      name: 'India',
    },
    {
      id: 11,
      name: 'Russia',
    },
    {
      id: 12,
      name: 'Switzerland',
    }
  ];
    selectEvent(item) {
    // do something with selected item
  }


}

Próximo. abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<div class="ng-autocomplete">
  <ng-autocomplete
    [data]="countries"
    [searchKeyword]="keyword"
    placeHolder="Enter the Country Name"
    (selected)='selectEvent($event)'
    (inputChanged)='onChangeSearch($event)'
    (inputFocused)='onFocused($event)'
    historyIdentifier="countries"
    [itemTemplate]="itemTemplate"
    [notFoundTemplate]="notFoundTemplate">
  </ng-autocomplete>

  <ng-template #itemTemplate let-item>
    <a [innerHTML]="item.name"></a>
  </ng-template>

  <ng-template #notFoundTemplate let-notFound>
    <div [innerHTML]="notFound"></div>
  </ng-template>
</div>  

Finalmente, podemos usar un código CSS para diseñar el componente de autocompletar. Abra el src/app/app.component.cssarchivo y actualícelo de la siguiente manera:

.ng-autocomplete {
  width:100%;
  max-width: 600px;
  display: table;
  margin: 0 auto;
}

Consulte los documentos para obtener más información.

Conclusión

En este ejemplo, hemos visto cómo implementar la función de autocompletar en nuestra aplicación Angular 10 usando angular-ng-autocomplete.

Publicar un comentario

0 Comentarios