https://github.com/sgcm14/pipes-app

App en angular para practicar pipes
https://github.com/sgcm14/pipes-app

angular jasmine-tests pipes primeng

Last synced: about 1 month ago
JSON representation

App en angular para practicar pipes

• Host: GitHub
• URL: https://github.com/sgcm14/pipes-app
• Owner: sgcm14
• Created: 2022-03-13T23:06:04.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-07-09T01:53:00.000Z (almost 3 years ago)
• Last Synced: 2025-03-15T11:49:52.485Z (over 1 year ago)
• Topics: angular, jasmine-tests, pipes, primeng
• Language: TypeScript
• Homepage: https://pipes-app-sgcm14.netlify.app/
• Size: 1.41 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Pipes Apps

=============

- Este proyecto se realizó siguiendo el curso [Angular: De cero a experto](https://www.udemy.com/course/angular-fernando-herrera/# "Angular: De cero a experto") 

> En este proyecto se usó Angular, primeng

La página por defecto y al seleccionar **Textos y fechas** se ve así:

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen1.png)

> Pantalla de **Textos y fechas**

Aquí se muestra como se usa los pipes **(uppercase, lowercase, titlecase, date)**

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen2.png)

> Pantalla de **Textos y fechas**

Si se selecciona **Números** se ve así:

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen3.png)

> Pantalla de **Números**

Aquí se muestra como se usa **(number, currency, percent)**

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen4.png)

> Pantalla de **Números**

Si se selecciona **No comunes** se ve así:

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen5.png)

> Pantalla de **No comunes**

Aquí se muestra como se usa **(i18nSelect, i18nPlural, slice, json, key, value, async)**

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen6.png)

> Pantalla de **No comunes**

Si se hace click en **Cambiar Persona** se cambia de nombre y género; si se hace click en **Borrar Cliente** va disminuyendo la cantidad de clientes.

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen7.png)

> Pantalla de **No comunes**

Si se selecciona **Pipes personalizados** se ve así:

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen8.png)

> Pantalla de **Pipes personalizados**

Aquí se crean pipes: 

Si se da click en **Toggle mayúsculas** la palabra NOSOTROS pasará a minúscula y viceversa.

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen9.png)

> Pantalla de **Pipes personalizados**

Si se da click en **Por Nombre** la lista de héroes se ordenará por nombre.

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen10.png)

> Pantalla de **Pipes personalizados**

Si se da click en **Vuela** la lista de héroes se agrupa por vuela y no vuela.

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen11.png)

> Pantalla de **Pipes personalizados**

Si se da click en **Por color** la lista se ordena por colores.

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen12.png)

> Pantalla de **Pipes personalizados**

Si se da click en **Nombre** la lista se ordena por nombre usando ngprime

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen13.png)

> Pantalla de **Pipes personalizados**

Si se da click en **Vuela** la lista se ordena por vuela y no vuela usando ngprime

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen14.png)

> Pantalla de **Pipes personalizados**

Si se da click en **Color** la lista se ordena por color usando ngprime

![](https://raw.githubusercontent.com/sgcm14/pipes-app/main/doc/imagen15.png)

> Pantalla de **Pipes personalizados**

**Realizado por :** Sammy Gigi Cantoral Montejo (sgcm14)