Angular hace que sea muy fácil implementar casi todas las funciones. En este artículo, aprenderemos cómo implementar la funcionalidad de agregar etiquetas en su aplicación angular. Agregar etiquetas tiene aplicaciones en varias áreas, como aplicaciones de música, aplicaciones de compras en línea, etc. Al usar esta funcionalidad, podemos filtrar los resultados de una búsqueda, según la necesidad del usuario.
Acercarse:
- La biblioteca de materiales angular proporciona mat-chip, que se puede utilizar para implementar esta funcionalidad.
- Podemos usarlo dentro de un campo de formulario para recibir información del usuario y actualizar nuestra lista de etiquetas.
- Una vez que el usuario haya terminado de agregar etiquetas, podemos guardar la lista de etiquetas.
- Ahora que tenemos nuestra lista de etiquetas, podemos usarla de la forma que queramos.
Implementación paso a paso:
Para la clase de componente:
- Importe MatChipInputEvent desde @angular/material/chips para manejar el evento de entrada de etiquetas.
- Importe COMMA , ENTER desde @angular/cdk/keycodes para agregar las teclas de separación.
- Cree una lista que contendrá todas las etiquetas ingresadas por el usuario.
- Cree su método personalizado de agregar y quitar para agregar y quitar etiquetas.
- Código para el componente:
import {Component} from '@angular/core';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {MatChipInputEvent} from '@angular/material/chips';
@Component({
selector: 'add-tags',
templateUrl: 'tags.html',
styleUrls: ['tags.css'],
})
export class addTags {
/*Set the values of these properties
to use them in the HTML view.*/
visible = true;
selectable = true;
removable = true;
/*set the separator keys.*/
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
/*create the tags list.*/
Tags: string[] = [];
/*our custom add method which will take
matChipInputTokenEnd event as input.*/
add(event: MatChipInputEvent): void {
/*we will store the input and value in local variables.*/
const input = event.input;
const value = event.value;
if ((value || '').trim()) {
/*the input string will be pushed to the tag list.*/
this.Tags.push(value);
}
if (input) {
/*after storing the input we will clear the input field.*/
input.value = '';
}
}
/*custom method to remove a tag.*/
remove(tag: string): void {
const index = this.Tags.indexOf(tag);
if (index >= 0)
{
/*the tag of a particular index is removed from the tag list.*/
this.Tags.splice(index, 1);
}
}
}
Para la vista HTML:
- Cree un campo de formulario que aceptará la entrada y mostrará la lista de etiquetas.
- Hay algunos parámetros:
1. matChipInputFor: toma el id del campo de formulario, del cual tomaremos la entrada de etiquetas.
2. matChipInputSeparatorKeyCodes: Toma el valor de las claves que se utilizarán como separador.
3 .matChipInputTokenEnd: tan pronto como el usuario presione la tecla de separación, esta contendrá la última etiqueta ingresada, y podemos actualizar la lista de etiquetas mediante nuestro método de adición personalizado. - Para eliminar una etiqueta en particular, agregue un icono de tapete con la directiva matChipRemove.
- Código para la vista HTML:
<!DOCTYPE html>
<html>
<head>
<title>tutorial</title>
</head>
<body>
<mat-form-field class="input">
<!--this contains the list of tags-->
<mat-chip-list #taglist>
<!--set the properties for the tags-->
<mat-chip selected color="primary"
*ngFor="let Tag of Tags"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(Tag)">
{{Tag}}
<!--add icon with matChipRemove
directive to remove any tag-->
<mat-icon matChipRemove
*ngIf="removable">cancel
</mat-icon>
</mat-chip>
<input placeholder="Add Tags"
[matChipInputFor]="taglist"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)" />
</mat-chip-list>
</mat-form-field>
</body>
</html>
- Ahora, en el componente principal, incluya este componente ‘agregar etiquetas’.
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div style="align-items: center;">
<app-test></app-test>
</div>
`,
styleUrls: ['main.css'],
})
export class AppComponent {
}
- Hemos implementado con éxito la funcionalidad de agregar etiquetas.
Salida: Mat-chips sobre el campo de formulario representa las etiquetas ingresadas por el usuario.
Publicación traducida automáticamente
Artículo escrito por vaibhav19verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA