Ngx-select-style NPM

NgxSelectStyle

This library was generated with Angular CLI version 16.2.0.

Code scaffolding

Note: Don't forget to add --project ngx-select-style or else it will be added to the default project in your angular.json file.

Build

Run ng build ngx-select-style to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-select-style, go to the dist folder cd dist/ngx-select-style and run npm publish.

Running unit tests

Run ng test ngx-select-style to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Cambios realizados/Changes made

Correcion de altura del dropdown al pasar de una vista de un componente a otra

Dropdown height correction when switching from one view of a component to another

Descripcion/Description

Español

esta biblioteca la realize para poder usar algunos efectos que deseaba tener en un campo select, lo cual me era muy complicado hacerlo en los select que vienen por defecto en el lenguaje de hipertexto HTML, se parece un poco en sus funcinalidades a los campos select originales, ustedes opinaran si es cierto o no, me gustaria recibir sugerencias en mi canal de youtube https://www.youtube.com/channel/UCTyyH-42BIOox0_oAj-nldw, Donaciones a https://paypal.me/javierHernadezA?country.x=CO&locale.x=es_XC

English

I made this library to be able to use some effects that I wanted to have in a select field, which was very difficult for me to do in the select that come by default in the HTML hypertext language, it is a bit similar in its functionalities to the original select fields You will decide if it is true or not, I would like to receive suggestions on my YouTube channel https://www.youtube.com/channel/UCTyyH-42BIOox0_oAj-nldw donations to https://paypal.me/javierHernadezA?country.x=CO&locale.x=es_XC

Instalacion/Facility

Español

ejecutar el comando: npm i ngx-select-style y a disfrutar!

English

run the command: npm i ngx-select-style and enjoy!

modo de uso/mode of use

Español

en cada propiedad se pueden usar variables que vengan de las clases que deseen

widthMod="'250px'" ## ajusta el ancho del select, si usa medidas dinamicas el select ajustara tambien el tamaño de la fuente de forma dinamica

heightMod="'38px'" ## ajusta el alto del select

selectValues="'Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'" ## valores que seran mostrados en las opciones selccionables del select

textLabel="'Dia Contacto hasta'" ## texto que sera mostrado en la parte superior del select

idSelect="'diaCont2'" ## este campo es muy importante para que todos los select trabajen de forma independiente, ya que el nombre de este campo debe ser unico para cada select

effectType="1" ## esto muestra la forma en que se desplegara la persiana del select, por ahora esta hasta desde 0 al 6

borderSelectColor="''" ## esto cambia el color del borde del select, se pueden usar valores css ejemplo rgba(120,120,120,0.4) esto para darle una ligera transparencia, pero puede ser ajustado a gusto

optionSelectColor="''" ## este campo cambia el color cuando selecciona una opcion de la persiana

styleOption="'3d'" ## este campo genera un estilo que yo le llame 3d, no se si les guste, si la opcion esta vacia, el estilo sera el por defecto

dataValue="''" ## este campo es mas parecido al value de los select, con esto se pueden enviar los valores distintos a los que aparecen en la parte visible, ejemplo visible "uno" no visible "1" si el dataValue no tiene la misma longitud o esta vacio, el valor por defecto sera los del selectValues

la forma de sacar los valores de cada select consiste en un servicio que sera inyectado en la clase en donde se hara la peticion HTTP, Ejemplo:

import { SelectStylesService } from 'ruta del paquete';

constructor(private selectValue : SelectStylesService){}

const objeto = { "pais1": this.selectValue.data'selectA', "pais2": this.selectValue.data'selectB', "pais3": this.selectValue.data'selectC' };

en este ejemplo 'selectA', 'selectB', 'selectC' son los id de cada componente que se usa en el proyecto, de esta forma se obtienen los datos de cada uno para ser enviados en el cuerpo de la solicitud etc

English

widthMod="'250px'" ## adjusts the width of the select, if using dynamic measures, the select will also adjust the font size dynamically.

heightMod="'38px'" ## adjusts the height of the select.

selectValues= "'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'" ## values that will be displayed in the selectable options of the select.

textLabel="'example text'" text that will be displayed at the top of the select.

idSelect="'id unique'" this field is very important so that all selects work independently, as the name of this field must be unique for each select.

effectType="1" this shows the way the select's dropdown will be displayed, For now it is up to 0 to 6.

borderSelectColor="'rgba(0,0,0,0.3)'" this changes the border color of the select, CSS values can be used, for example, rgba(120,120,120,0.4) for a slight transparency, but it can be adjusted as desired.

optionSelectColor="'rgba(0,0,0,0.3)'" this field changes the color when selecting an option from the dropdown.

styleOption="'3d'" this field generates a style that I called 3D, I don't know if you'll like it, If the option is empty, the style will be the default

dataValue="'value1','value2','value3'" this field is more similar to the 'value' of the selects, allowing different values to be sent than those that appear in the visible part. For example, visible 'one', not visible '1'. If 'dataValue' doesn't have the same length or is empty, the default values will be those of 'selectValues'.

The way to get the values of each select consists of a service that will be injected into the class where the HTTP request will be made. Example:

import { SelectStylesService } from 'ruta del paquete';

constructor(private selectValue : SelectStylesService){}

const objeto = { "pais1": this.selectValue.data'selectA', "pais2": this.selectValue.data'selectB', "pais3": this.selectValue.data'selectC' };

In this example 'selectA', 'selectB', 'selectC' are the ids of each component that is used in the project, in this way the data of each one is obtained to be sent in the body of the request etc.