Guajiritos Icon Selector

Guajiritos Icon Selector es una librería destinada a la selección de íconos de material. Permite la selección del ícono a través de una interfaz visual amigable para el usuario.

Instalación

Con npm

npm i @guajiritos/icon-selector --save

Con yarn

yarn add @guajiritos/icon-selector

Con pnpm

pnpm add @guajiritos/icon-selector

Estilos y configuración del tema de Angular Material

La librería cuenta con una personalización predeterminada de estilos que puede agregar a su aplicación de la siguiente forma:

@import "@guajiritos/icon-selector/theme";


@include theme-guajiritos-icon-selector($custom-theme);

Uso

Debe importar las dependencias para el correcto funcionamiento de la librería en su proyecto.

import { GuajiritosIconSelector } from "guajiritos-icon-selector";

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    GuajiritosIconSelector,
    BrowserAnimationsModule,
    MatDialogModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    MatIconModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Luego agregarla a su plantilla. Usando FormControl:

<guajiritos-icon-selector [required]="true" [formControl]="form"></guajiritos-icon-selector>

y declarar el formulario reactivo

import {UntypedFormControl} from "@angular/forms";

form: UntypedFormControl = new UntypedFormControl({value: null, disabled: false});

o usando FormGroup:

<div [formGroup]="form">
  <guajiritos-icon-selector [required]="true" formControlName="icon"></guajiritos-icon-selector>
</div>

y declarar un FormGroup

import {UntypedFormControl, UntypedFormGroup} from "@angular/forms";

form: UntypedFormGroup = new UntypedFormGroup({
  icon: new UntypedFormControl({value: null, disabled: false})
});

Notas

- El valor del required no es obligatorio.
- Para deshabilitar el componente es necesario deshabilitar el formulario reactivo.