item:
+ return start
+ else:
+ return start + 1
+ if start > end:
+ return start
+
+ mid = round((start + end)/ 2)
+
+ if the_array[mid] < item:
+ return binary_search(the_array, item, mid + 1, end)
+
+ elif the_array[mid] > item:
+ return binary_search(the_array, item, start, mid - 1)
+
+ else:
+ return mid
+
+ """
+ Insertion sort that timsort uses if the array size is small or if
+ the size of the "run" is small
+ """
+ def insertion_sort(the_array):
+ l = len(the_array)
+ for index in range(1, l):
+ value = the_array[index]
+ pos = binary_search(the_array, value, 0, index - 1)
+ the_array = the_array[:pos] + [value] + the_array[pos:index] + the_array[index+1:]
+ return the_array
+
+ def merge(left, right):
+ """Takes two sorted lists and returns a single sorted list by comparing the
+ elements one at a time.
+ [1, 2, 3, 4, 5, 6]
+ """
+ if not left:
+ return right
+ if not right:
+ return left
+ if left[0] < right[0]:
+ return [left[0]] + merge(left[1:], right)
+ return [right[0]] + merge(left, right[1:])
+
+ def timsort(the_array):
+ runs, sorted_runs = [], []
+ length = len(the_array)
+ new_run = [the_array[0]]
+
+ # for every i in the range of 1 to length of array
+ for i in range(1, length):
+ # if i is at the end of the list
+ if i == length - 1:
+ new_run.append(the_array[i])
+ runs.append(new_run)
+ break
+ # if the i'th element of the array is less than the one before it
+ if the_array[i] < the_array[i-1]:
+ # if new_run is set to None (NULL)
+ if not new_run:
+ runs.append([the_array[i]])
+ new_run.append(the_array[i])
+ else:
+ runs.append(new_run)
+ new_run = []
+ # else if its equal to or more than
+ else:
+ new_run.append(the_array[i])
+
+ # for every item in runs, append it using insertion sort
+ for item in runs:
+ sorted_runs.append(insertion_sort(item))
+
+ # for every run in sorted_runs, merge them
+ sorted_array = []
+ for run in sorted_runs:
+ sorted_array = merge(sorted_array, run)
+
+ print(sorted_array)
+
+ timsort([2, 3, 1, 5, 6, 7])
+```
+
+#### Complejidad:
+
+Tim sort tiene una Complejidad estable de O (N log (N)) y se compara realmente bien con Quicksort. Se puede encontrar una combinación de complejidades en este [cuadro.](https://cdn-images-1.medium.com/max/1600/1*1CkG3c4mZGswDShAV9eHbQ.png)
+
+#### Más información:
+
+* [Wikipedia](https://en.wikipedia.org/wiki/Timsort)
+
+* [GeeksForGeeks](https://www.geeksforgeeks.org/timsort/)
+
+* [Youtube: una explicación visual de Quicksort](https://www.youtube.com/watch?v=jVXsjswWo44)
+
+
+#### Créditos:
+
+[Implementación de Python](https://hackernoon.com/timsort-the-fastest-sorting-algorithm-youve-never-heard-of-36b28417f399)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/algorithms/string-matching-algorithms/rabin-karp-algorithm/index.md b/client/src/pages/guide/spanish/algorithms/string-matching-algorithms/rabin-karp-algorithm/index.md
new file mode 100644
index 0000000000..24807a820b
--- /dev/null
+++ b/client/src/pages/guide/spanish/algorithms/string-matching-algorithms/rabin-karp-algorithm/index.md
@@ -0,0 +1,46 @@
+---
+title: Rabin Karp Algorithm
+localeTitle: Algoritmo de Rabin Karp
+---
+## Algoritmo de Rabin-Karp
+
+* Un algoritmo de búsqueda / búsqueda de cadenas desarrollado por Michael O. Rabin y Richard M. Karp.
+* Utiliza la técnica de **_hash_** y **_la fuerza bruta_** para comparación.
+
+#### Términos importantes
+
+* **_patrón_** es la cadena a buscar. Considere la longitud del patrón como **_M_** caracteres.
+* **_texto_** es el texto completo desde el que se busca el patrón. Considere la longitud del texto como **_N_** caracteres.
+
+#### ¿Qué es la comparación de fuerza bruta?
+
+En la comparación de fuerza bruta, cada carácter del patrón se compara con cada carácter del texto hasta que se encuentran caracteres no coincidentes.
+
+#### Trabajo del algoritmo de Rabin-Karp
+
+1. Calcular el valor de hash del _patrón_
+2. Calcular el valor hash de los primeros _M_ caracteres del _texto_
+3. Compara ambos valores hash
+4. Si son desiguales, calcule el valor de hash para los siguientes _M_ caracteres del _texto_ y compare nuevamente.
+5. Si son iguales, realice una comparación de fuerza bruta.
+```
+hash_p = hash value of pattern
+ hash_t = hash value of first M letters in body of text
+ do
+ if (hash_p == hash_t)
+ brute force comparison of pattern and selected section of text
+ hash_t= hash value of next section of text, one character over
+ while (end of text or brute force comparison == true)
+```
+
+#### Ventaja sobre el algoritmo de emparejamiento de cadenas ingenuas
+
+Esta técnica produce solo una comparación por secuencia de texto y la fuerza bruta solo se requiere cuando los valores de hash coinciden.
+
+#### Aplicaciones
+
+* **_Detección de plagio_**
+
+#### Más información:
+
+[Rabin-Karp en Wikipedia](https://en.wikipedia.org/wiki/Rabin%E2%80%93Karp_algorithm/)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/android-development/core-components/index.md b/client/src/pages/guide/spanish/android-development/core-components/index.md
new file mode 100644
index 0000000000..6ecc542015
--- /dev/null
+++ b/client/src/pages/guide/spanish/android-development/core-components/index.md
@@ -0,0 +1,32 @@
+---
+title: Android core components
+localeTitle: Componentes básicos de Android
+---
# Componentes básicos de Android
+
+Los componentes principales son los elementos esenciales de una aplicación para Android. Cada uno de ellos tiene su propio propósito y ciclo de vida, pero no todos son independientes. Son:
+
+* Ocupaciones
+* Servicios
+* Receptores de radiodifusión
+* Proveedores de contenido
+
+## [Ocupaciones](https://developer.android.com/guide/components/activities/)
+
+Una _actividad_ es un componente que tiene una interfaz de usuario y representa una sola pantalla. Una aplicación puede tener múltiples actividades, cada una de ellas puede ser un punto de entrada a la aplicación para el usuario o para el sistema (la actividad de una aplicación que desea abrir otra actividad que pertenece a la misma aplicación o a otra diferente).
+
+## [Servicios](https://developer.android.com/guide/components/services)
+
+Un _servicio_ es un componente sin interfaz de usuario para realizar operaciones de larga ejecución en segundo plano. Hay dos tipos de servicios:
+
+* Servicios de _primer plano_ : están estrictamente relacionados con la interacción del usuario (por ejemplo, la reproducción de música), por lo que es más difícil para el sistema matarlos.
+* Servicios en _segundo plano_ : no están directamente relacionados con las actividades del usuario, por lo que pueden eliminarse si se necesita más RAM.
+
+## [Receptores de radiodifusión](https://developer.android.com/guide/components/broadcasts)
+
+Un _receptor de difusión_ es otro componente sin interfaz de usuario (excepto una notificación de barra de estado opcional) que permite al sistema enviar eventos desde / a la aplicación, incluso cuando este último no se haya iniciado previamente.
+
+## [Proveedores de contenido](https://developer.android.com/guide/topics/providers/content-providers)
+
+Un _proveedor de contenido_ es un componente que se usa para administrar un conjunto de datos de aplicaciones para compartir con otras aplicaciones. Cada elemento guardado en el proveedor de contenido se identifica mediante un esquema URI.
+
+Para obtener información detallada sobre el tema, consulte la documentación oficial de los [fundamentos de Android.](https://developer.android.com/guide/components/fundamentals)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/android-development/firebase/connect-to-firebase/index.md b/client/src/pages/guide/spanish/android-development/firebase/connect-to-firebase/index.md
new file mode 100644
index 0000000000..ffb3ab1115
--- /dev/null
+++ b/client/src/pages/guide/spanish/android-development/firebase/connect-to-firebase/index.md
@@ -0,0 +1,40 @@
+---
+title: connecting-to-firebase
+localeTitle: conexión a base de fuego
+---
+# Prerrequisitos
+
+1. La última versión de Android Studio
+
+La forma más fácil de conectarse a firebase es usar el asistente de firebase.
+
+# 1\. Conexión utilizando el Asistente Firebase
+
+1. Crea una cuenta en la [Consola Firebase](https://console.firebase.google.com) . Haga clic en Agregar proyecto para agregar su proyecto de Android Studio.
+
+2. Instalar el repositorio de Google Puede hacer esto agregando la dependencia a su archivo build.gradle a nivel de proyecto de esta manera:
+
+
+```java
+allprojects{
+ repositories {
+ maven {
+ url "https://maven.google.com" // Google's Maven repository
+ }
+ }
+ }
+```
+
+Alternativamente, puedes hacerlo [usando la GUI](https://developer.android.com/studio/write/firebase) .
+
+3. Vaya a Herramientas> Firebase y seleccione Conectar a Firebase
+
+Si desea conectarse a firebase manualmente, las instrucciones detalladas están disponibles [aquí](https://firebase.google.com/docs/android/setup) . Una vez que haya conectado su proyecto de Android Studio a Firebase, puede:
+
+1. haga clic en un producto en el asistente de base de fuego y diríjase a los documentos de Google donde se le indicará cómo proceder
+2. vaya al producto deseado en la **Descripción del proyecto** en la consola y haga clic en **Comenzar**
+3. [Vaya a los documentos de Firebase](https://www.firebase.com/docs/android/quickstart.html) para ver cómo configurar productos individuales en su proyecto
+
+Leer una combinación de los tres le permitirá configurar el producto, que incluye agregar dependencias adecuadas a su archivo build.gradle.
+
+**Si te encuentras Gradle Sync** Intente cambiar la versión de Firebase-core o la versión de Firebase-database
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/android-development/firebase/firebase-storage/setup/index.md b/client/src/pages/guide/spanish/android-development/firebase/firebase-storage/setup/index.md
new file mode 100644
index 0000000000..d43c4dab6f
--- /dev/null
+++ b/client/src/pages/guide/spanish/android-development/firebase/firebase-storage/setup/index.md
@@ -0,0 +1,51 @@
+---
+title: Setting up Firebase Storage
+localeTitle: Configuración de Firebase Storage
+---
+# Configuración de Firebase Storage
+
+## Prerrequisitos
+
+1. La última versión de Android Studio
+2. Se ha conectado con Firebase de forma manual o mediante el Asistente de Firebase (consulte [Conexión a Firebase](guide/src/pages/android-development/firebase/connecting-to-firebase) ).
+
+Se recomienda que lo haga para no confundirse con instrucciones parciales relacionadas con esto en los documentos que se mencionan a continuación.
+
+## Configurándolo con Android Studio
+
+Después de agregar Firebase a su proyecto, tendrá que agregar dependencias adicionales y hacer otras cosas para configurar El almacenamiento Firebase. Hay la siguiente documentación sobre esto:
+
+* [Base de fuego](https://firebase.google.com/docs/storage/android/start)
+
+Puede haber riesgo de confusión en esa documentación o, si es nuevo en Firebase, es posible que tenga un poco de dificultad para entenderlo. Así que sigue los pasos de belows cuidadosamente:
+
+**Añadir Dependencias de Gradle**
+
+En su archivo build.gradle a nivel de aplicación, agregue lo siguiente
+
+```java
+dependencies {
+ implementation 'com.google.firebase:firebase-storage:16.0.2'
+ }
+```
+
+## Instalación de Firebase Android SDK, permisos y código de configuración
+
+Las instrucciones detalladas para estos se pueden encontrar [aquí](https://firebase.google.com/docs/android/setup) .
+
+## Recursos
+
+Para obtener información sobre cómo leer y escribir en el almacenamiento de su aplicación de Android, consulte los documentos que se enumeran a continuación.
+
+* [Subir archivos desde Android Guía Firebase](https://firebase.google.com/docs/storage/android/upload-files)
+
+* [Descargar archivos a Android Guía Firebase](https://firebase.google.com/docs/storage/android/download-files)
+
+
+## Ejemplos de proyectos de desarrolladores de Firebase
+
+Puede hacer un seguimiento de estos ejemplos de los desarrolladores de Firebase para iniciar el almacenamiento de Firebase. Firebase Quickstart-Android [\-muestra](https://github.com/firebase/quickstart-android/tree/master/storage)
+
+## Nota
+
+Google ahora ha desaprobado "compilar" y, en lugar de eso, debe usar "implementación".
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/android-development/firebase/realtime-database/setup/index.md b/client/src/pages/guide/spanish/android-development/firebase/realtime-database/setup/index.md
new file mode 100644
index 0000000000..0ee1b622b9
--- /dev/null
+++ b/client/src/pages/guide/spanish/android-development/firebase/realtime-database/setup/index.md
@@ -0,0 +1,43 @@
+---
+title: Setting up Firebase Realtime Database
+localeTitle: Configuración de Firebase Realtime Database
+---
+# Prerrequisitos
+
+1. La última versión de Android Studio
+2. Se ha conectado con Firebase de forma manual o mediante el Asistente de Firebase (consulte [Conexión a Firebase](guide/src/pages/android-development/firebase/connecting-to-firebase) ). Se recomienda que lo haga para no confundirse con instrucciones parciales relacionadas con esto en los documentos que se mencionan a continuación.
+
+# Configurándolo con Android Studio
+
+Después de agregar Firebase a su proyecto, tendrá que agregar dependencias adicionales y hacer otras cosas para configurar la base de datos en tiempo real. Hay dos documentaciones sobre esto:
+
+1. De inicio rápido firebase [docs](https://www.firebase.com/docs/android/quickstart.html)
+2. [Documentos de](https://firebase.google.com/docs/database/android/start/) Google
+
+Hay algunas discrepancias entre los dos. Para compensarlos, puede seguir los documentos de Firebase, pero en lugar de usar las dependencias de gradle que se enumeran allí, use la siguiente lista. De esa manera, no perderá ningún paso de la documentación.
+
+**Añadir Dependencias de Gradle** 1 En su archivo build.gradle a nivel de aplicación, agregue lo siguiente
+
+```java
+dependencies {
+ implementation 'com.firebase:firebase-client-android:2.5.2+'
+ implementation 'com.google.firebase:firebase-database:15.0.0'
+ }
+```
+
+# Instalación de Firebase Android SDK, permisos y código de configuración
+
+Las instrucciones detalladas para estos se pueden encontrar [aquí](https://www.firebase.com/docs/android/quickstart.html) .
+
+# Recursos
+
+Para obtener información sobre cómo leer y escribir en la base de datos en su aplicación de Android, consulte los dos documentos que se enumeran en Referencias. También puede encontrar información sobre cómo usar los productos Firebase en la documentación de Google, pero nuevamente es probablemente una buena idea consultar también los documentos de Firebase, o cualquier cosa que pueda ser útil.
+
+# Referencias
+
+* FIREBASE, _Android Quickstart_ , 17/04/2018, 07/05/2018, https://www.firebase.com/docs/android/quickstart.html
+* GOOGLE, _configura la base de datos en tiempo real de Firebase para Android_ , 05/04/2018, 05/07/2018, https://firebase.google.com/docs/database/android/start/
+
+# Nota
+
+La primera línea proviene de los [documentos de](https://www.firebase.com/docs/android/quickstart.html) Firebase sobre la configuración de db en tiempo real en Android Studio. En los documentos, se usa 'compilar' pero eso está en desuso y reemplazado por 'implementación'. La segunda línea proviene de la [documentación de](https://firebase.google.com/docs/database/android/start/) Google sobre la configuración de db en tiempo real en Android Studio. Si es realmente redundante agregar ambos, corrija este artículo.
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/android-development/index.md b/client/src/pages/guide/spanish/android-development/index.md
new file mode 100644
index 0000000000..5926f8f2d8
--- /dev/null
+++ b/client/src/pages/guide/spanish/android-development/index.md
@@ -0,0 +1,63 @@
+---
+title: Android Development
+localeTitle: Desarrollo de Android
+---
+# Desarrollo de Android
+
+Las aplicaciones de Android pueden ser una manera excelente y divertida de ingresar al mundo de la programación. Oficialmente, los programadores pueden usar Java, Kotlin o C ++ para desarrollar para Android, y aunque puede haber restricciones de API, usando herramientas, los desarrolladores pueden usar una gran cantidad de lenguajes, incluyendo JavaScript, C o ensamblados, y las posibilidades son infinitas.
+
+Desde juegos simples y aplicaciones de utilidad hasta reproductores de música en toda regla, hay muchas oportunidades para crear algo significativo con Android. La comunidad de desarrolladores de Android está muy extendida, y la documentación y los recursos en línea son fáciles de encontrar, por lo que puede abordar cualquier problema que esté enfrentando.
+
+Definitivamente, hay una curva de aprendizaje para acostumbrarse al marco de Android, sin embargo, una vez que entienda los componentes principales que conforman la aplicación, el resto vendrá naturalmente.
+
+La curva de aprendizaje involucrada en Android tiene una pendiente relativamente más pequeña en comparación con el aprendizaje de otras tecnologías como NodeJS. También es relativamente más fácil de entender y hacer contribuciones a AOSP alojadas por Google. El proyecto se puede encontrar [aquí.](https://source.android.com/)
+
+## Empezando
+
+Consulte las guías en esta carpeta para conocer los 4 [componentes principales](core-components/index.md) que conforman una aplicación de Android y cómo puede comenzar con una aplicación de muestra, y luego profundice en los temas más avanzados, como los fragmentos y el sistema de compilación Gradle. Luego revise la guía de especificaciones de diseño de materiales y aprenda cómo hacer que sus aplicaciones sean hermosas y fáciles de usar.
+
+### Configurando y Empezando con Android Studio
+
+Vaya a este [enlace](https://www.oracle.com/technetwork/java/javase/downloads/index.html) e instale el último JDK. Ahora descargue el paquete de herramientas de Android Studio y SDK desde [aquí](https://developer.android.com/studio/) . Instale el Android Studio y el SDK después de la configuración. Tome nota de la ubicación del SDK. Si te encuentras con algún error ve a la configuración más tarde para resolverlo.
+
+Finalmente, aprenda a integrar bibliotecas de terceros y servicios de Firebase para agregar funcionalidad a su aplicación. Sería útil si revisa la documentación oficial de cada componente.
+
+### Documentacion oficial
+
+[Google Developers Guide para Android](https://developer.android.com/training/index.html)
+
+#### Java vs. Kotlin
+
+Desde que Google anunció Kotlin como el idioma oficial para el desarrollo de Android en Google IO en 2017, los programadores que quieren convertirse en desarrolladores de Android se encuentran en un dilema. La gran pregunta que se les presenta es si deben aprender Kotlin o Java.
+
+##### Los principiantes en el desarrollo de Android deberían comenzar con Java
+
+Lo primero y más importante es que el desarrollo de Android no lo es todo; como programador, puede comenzar su carrera con el desarrollo de Android, pero si comienza con un lenguaje bien establecido como Java, se convierte en parte de la comunidad y el mercado más grandes de Java, lo que significa más oportunidades de empleo.
+
+Lo segundo y más importante es que hay una gran comunidad de programadores de Java, lo que significa que puedes encontrar respuestas cuando estás atascado. Esto es muy importante porque, como principiante, se enfrentará a muchos problemas técnicos y es posible que no sepa adónde dirigirse cuando está atrapado. Cuando busca en Google con un problema de Java, está obligado a obtener respuestas; No se puede decir lo mismo de Kotlin, que todavía es un nuevo lenguaje de programación.
+
+###### Los programadores de Java deberían aprender Kotlin
+
+Ahora, volviendo al segundo grupo de programadores que quieren aprender sobre el desarrollo de Android: nuestros compañeros desarrolladores de Java. Para ellos, creo que es mejor aprender Kotlin porque realmente mejora la productividad.
+
+Una clase que toma 50 líneas de código en Java realmente puede escribirse en una sola línea en Kotlin. Puede ayudarlo a evitar todos los códigos de placa de caldera, por ejemplo, no necesita especificar los métodos de obtención y configuración, es igual a (), hashCode () o toString (). Kotlin puede generar todo eso por sí mismo.
+
+Si no lo sabes, Kotlin fue desarrollado por JetBrains, la compañía detrás de uno de los IDE de Java más populares, IntelliJ IDEA. Eran una tienda de Java y desarrollar IDE como IntelliJ IDEA, PyCharm y ReSharper, todos en Java, y construyeron Kotlin para mejorar su productividad, pero al mismo tiempo, no pueden reescribir todo su código en Kotlin, por eso hicieron Kotlin. Totalmente interoperable con Java.
+
+Como Kotlin genera el código de bytes de Java, puede usar sus marcos y bibliotecas de Java favoritos en Kotlin y sus amigos de Java también pueden usar cualquier marco de Kotlin que desarrolle.
+
+### Práctica
+
+[Codelabs para aumentar las habilidades](https://codelabs.developers.google.com)
+
+### Consola de desarrollador de Google
+
+[Consola de desarrollador de Google](https://developer.android.com/distribute/console/)
+
+### Los cursos
+
+[Udacity Android Nanodegree Program](https://udacity.com/course/android-developer-nanodegree-by-google--nd801)
+
+### Desarrollando aplicaciones de Android
+
+La mejor parte del aprendizaje de Android es que los cursos y el material disponible en línea son gratuitos. El enlace al curso está aquí: [Desarrollo de aplicaciones Android](https://udacity.com/course/new-android-fundamentals--ud851) .
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/angular/angular-resources/index.md b/client/src/pages/guide/spanish/angular/angular-resources/index.md
new file mode 100644
index 0000000000..578ade53b6
--- /dev/null
+++ b/client/src/pages/guide/spanish/angular/angular-resources/index.md
@@ -0,0 +1,44 @@
+---
+title: Angular Resources
+localeTitle: Recursos angulares
+---
+Una colección de recursos angulares útiles
+
+## Angular 1.x
+
+### Páginas generales
+
+* [Angular JS](https://angularjs.org/) - La página de inicio de Angular JS
+* [Guía de estilo de AngularJS](https://github.com/johnpapa/angular-styleguide/tree/master/a1) : recomendaciones detalladas para el desarrollo angular
+
+### Videos
+
+* [Enrutamiento en Angular JS](https://www.youtube.com/watch?v=5uhZCc0j9RY) - Enrutamiento del lado del cliente en 15 minutos
+* [Aplicación Angular ToDo](https://www.youtube.com/watch?v=WuiHuZq_cg4) - Una aplicación Angular ToDo en 12 minutos
+
+### Los cursos
+
+* [Egghead.io AngularJS Cursos ($)](https://egghead.io/browse/frameworks/angularjs)
+
+## Angular 2.x +
+
+### Páginas generales
+
+* [Angular](https://angular.io/) - The Angular Homepage
+* [Guía de estilo angular](https://angular.io/guide/styleguide) - Mejores prácticas detalladas para el desarrollo angular
+
+### Páginas de temas específicos
+
+* [Directivas](http://www.sitepoint.com/practical-guide-angularjs-directives/) : excelente guía que detalla los directivas angulares (Parte 1)
+
+### Los cursos
+
+* [Egghead.io Cursos Angulares ($)](https://egghead.io/browse/frameworks/angular)
+* [FrontendMasters - Creación de aplicaciones Awesomer con Angular](https://frontendmasters.com/courses/building-apps-angular)
+* [Angular definitivo - lema de Todd](https://ultimateangular.com/)
+* [Angular 6 (anteriormente Angular 2) - La guía completa ($) Maximilian Schwarzmüller](https://www.udemy.com/the-complete-guide-to-angular-2/)
+
+## Blogs
+
+* [Alligator.io](https://alligator.io/angular/)
+* [Angular en profundidad](https://blog.angularindepth.com/tagged/angular)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/angular/animations/index.md b/client/src/pages/guide/spanish/angular/animations/index.md
new file mode 100644
index 0000000000..cb052370ce
--- /dev/null
+++ b/client/src/pages/guide/spanish/angular/animations/index.md
@@ -0,0 +1,290 @@
+---
+title: Animations
+localeTitle: Animaciones
+---
+# Animaciones
+
+#### Motivación
+
+Los componentes web modernos utilizan con frecuencia animaciones. Las hojas de estilo en cascada (CSS) arman a los desarrolladores con las herramientas para crear animaciones impresionantes. Las transiciones de propiedades, animaciones con nombres únicos, fotogramas clave de varias partes son posibles con CSS. Las posibilidades animables son infinitas gracias a CSS.
+
+En una aplicación web moderna, la animación enfoca la atención del usuario. Las buenas animaciones buscan guiar la atención del usuario de manera satisfactoria y productiva. Las animaciones no deben resultar molestas para el usuario.
+
+Las animaciones ofrecen retroalimentación en forma de movimiento. Muestran al usuario que la aplicación está manejando activamente sus solicitudes. Algo tan simple como una pulsación de un botón visible o un cargador cuando la aplicación debe cargar llama la atención del usuario.
+
+Las animaciones siguen siendo cada vez más relevantes en el caso de Angular. Google desarrolla Angular mientras promueve la filosofía de Diseño de Materiales. Fomenta interfaces de usuario concisas (IU) complementadas con comentarios animados de usuarios. Hace que las aplicaciones web se sientan un tanto vivas y divertidas de usar.
+
+La comunidad Angular desarrolla una biblioteca de widgets principales llamada [Material2](https://github.com/angular/material2) . Este proyecto agrega una variedad de módulos de widgets a Angular. La mayoría de ellos cuentan con animaciones. Para entender cómo funcionan, este artículo recomienda estudiar las animaciones de CSS antes de seguir leyendo.
+
+Las animaciones angulares son la versión optimizada del marco de lo que CSS proporciona de forma nativa. CSS es la tecnología central para las animaciones angulares que se producen en el navegador web. CSS está más allá del alcance de este artículo sin embargo. Es hora de abordar las animaciones angulares de frente.
+
+#### Configuración de animaciones
+
+Antes de animar, `BrowserAnimationsModule` debe incluirse en la matriz de importaciones del módulo raíz. Está disponible en `@angular/platform-browser/animations` . Este NgModule garantiza que las animaciones funcionen para la plataforma dada. Este artículo asume el navegador web estándar para cada ejemplo.
+
+Las animaciones angulares se declaran dentro de los metadatos de `@Component` . `@Component` decora una clase para distinguirla como un componente a Angular. Sus metadatos contienen configuraciones de componentes que incluyen las `animations: []` campo `animations: []` . Cada elemento de la matriz de este campo representa un activador de animación ( `AnimationTriggerMetadata` ).
+
+Las animaciones son exclusivas de su componente de host a través de los metadatos del decorador. Las animaciones solo se pueden utilizar en la plantilla del componente host. Las animaciones no heredan a los hijos del componente. Hay una solución fácil para esto.
+
+Siempre se puede crear un archivo separado que exporte una matriz. Cualquier clase de componente puede importar esa matriz desde la parte superior de su archivo host. El token de matriz importado entra en los metadatos de las animaciones del componente. Repita este proceso para cualquier otro componente que requiera la misma matriz en sus metadatos de animaciones.
+
+La proyección de contenido le permite aplicar animaciones al contenido del componente A (Modelo de objetos de documento). El componente B que envuelve este contenido DOM puede proyectar los contenidos en su propia plantilla. Una vez que lo hace, las animaciones del componente A no se niegan. El componente B incorpora las animaciones de A a través de la proyección de contenido.
+
+DE ACUERDO. Usted sabe cómo configurar animaciones y dónde declararlas. La implementación es el siguiente paso.
+
+#### Metodos de animacion
+
+Las animaciones angulares utilizan una serie de llamadas a métodos importable de `@angular/animations` . Cada elemento de la `@Component` animaciones `@Component` comienza como un solo método. Sus argumentos se desenredan como una secuencia de llamadas a métodos de orden superior. La siguiente lista muestra algunos de los métodos utilizados para construir animaciones angulares.
+
+* `trigger(selector: string, AnimationMetadata[])`
+
+devuelve `AnimationTriggerMetadata`
+
+* `state(data: string, AnimationStyleMetadata, options?: object)`
+
+devuelve `AnimationStateMetadata`
+
+* `style(CSSKeyValues: object)`
+
+devuelve `AnimationStyleMetadata`
+
+* `animate(timing: string|number, AnimationStyleMetadata|KeyframesMetadata)`
+
+devuelve `AnimationAnimateMetadata`
+
+* `transition(stateChange: string, AnimationMetadata|AnimationMetadata[], options?: object)`
+
+devuelve `AnimationTransitionMetadata`
+
+Si bien hay ciertamente [más métodos](https://angular.io/api/animations) para elegir, estos cinco métodos manejan los conceptos básicos. Tratar de entender estos métodos básicos como una lista no ayuda mucho. Las explicaciones paso a paso seguidas de un ejemplo le darán un mejor sentido.
+
+##### disparador (selector: cadena, AnimationMetadata \[\])
+
+El método `trigger(...)` encapsula un solo elemento de animación dentro de la matriz de animaciones.
+
+El primer `selector: string` argumentos del método `selector: string` coincide con el atributo de miembro `[@selector]` . Actúa como una directiva de atributos en la plantilla de componente. Básicamente, conecta el elemento de animación a la plantilla a través de un selector de atributos.
+
+El segundo argumento es una matriz que contiene una lista de métodos de animación aplicables. El `trigger(...)` mantiene en conjunto en una sola matriz.
+
+##### estado (datos: cadena, AnimationStyleMetadata, opciones ?: objeto)
+
+El método `state(...)` define el estado final de la animación. Aplica una lista de propiedades CSS al elemento de destino después de que concluye una animación. Esto es así para que el CSS del elemento animado coincida con la resolución de la animación.
+
+El primer argumento coincide con el valor de los datos vinculados al enlace de animación. Es decir, el valor vinculado a `[@selector]` en la plantilla coincide con el primer argumento de un `state(...)` . El valor de los datos determina el estado final. El cambio del valor determina los medios de animación (ver `transition(...)` ).
+
+El segundo argumento alberga los estilos CSS que se aplican a un elemento posterior a la animación. Los estilos se pasan invocando `style(...)` y pasando a su argumento los estilos deseados como un objeto.
+
+Una lista de opciones ocupa opcionalmente el tercer argumento. Las opciones predeterminadas de `state(...)` deben permanecer sin cambios a menos que se indique lo contrario.
+
+##### estilo (CSSKeyValues: objeto)
+
+Es posible que haya observado `AnimationStyleMetadata` varias veces en la lista anterior. El componente `style(...)` devuelve este tipo exacto de metadatos. Dondequiera que se apliquen estilos CSS, el método `style(...)` debe invocar. Un objeto que contiene estilos CSS representa su argumento.
+
+Por supuesto, los estilos que se pueden animar en CSS se transfieren al método de `style(...)` Angular `style(...)` . Por supuesto, nada de lo imposible para CSS se vuelve repentinamente posible con las animaciones angulares.
+
+##### animate (timing: string | number, AnimationStyleMetadata | AnimationKeyframesMetadata)
+
+La función `animate(...)` acepta una expresión de tiempo como su primer argumento. Este argumento cronometra, acelera y / o retrasa la animación del método. Este argumento acepta un número o una expresión de cadena. El formato se explica [aquí](https://angular.io/api/animations/animate#usage) .
+
+El segundo argumento de `animate(...)` es la propiedad CSS que garantiza la animación. Esto toma la forma del método de `style(...)` que devuelve `AnimationStyleMetadata` . Piense en `animate(...)` como el método que inicia la animación.
+
+Una serie de fotogramas clave también puede aplicarse al segundo argumento. Keyframes es una opción más avanzada que este artículo explica más adelante. Los fotogramas clave distinguen varias secciones de la animación.
+
+`animate(...)` no puede recibir un segundo argumento. En ese caso, el tiempo de animación del método solo se aplica al CSS reflejado en los métodos de `state(...)` . Los cambios de propiedad en los métodos de `state(...)` del activador `state(...)` se animarán.
+
+##### transición (changExpr: cadena, AnimationMetadata | AnimationMetadata \[\], opciones ?: objeto)
+
+`animate(...)` inicia una animación mientras que la `transition(...)` determina qué animación se inicia.
+
+El primer argumento consiste en una forma única de micro-sintaxis. Denota un cambio en el estado (o cambio en los datos) que tiene lugar. Los datos vinculados al enlace de animación de la plantilla ( `[selector]="value"` ) determinan esta expresión. La próxima sección titulada "Estado de animación" explica este concepto un poco más.
+
+El segundo argumento de `transition(...)` comprende `AnimationMetadata` (devuelto por `animate(...)` ). El argumento acepta una matriz de `AnimationMetadata` o una sola instancia.
+
+El valor del primer argumento coincide con el valor del límite de datos en la plantilla ( `[selector]="value"` ). Si se produce una coincidencia perfecta, el argumento se evalúa correctamente. El segundo argumento inicia una animación en respuesta al éxito del primero.
+
+Una lista de opciones ocupa opcionalmente el tercer argumento. Las opciones de `transition(...)` predeterminadas `transition(...)` deben permanecer sin cambios a menos que se indique lo contrario.
+
+##### Ejemplo de animación
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+ import { trigger, state, style, animate, transition } from '@angular/animations';
+
+ @Component({
+ selector: 'app-example',
+ template: `
+ Click the button to change its color!
+ Toggle Me! // animation binding
+ `,
+ animations: [ // metadata array
+ trigger('toggleClick', [ // trigger block
+ state('true', style({ // final CSS following animation
+ backgroundColor: 'green'
+ })),
+ state('false', style({
+ backgroundColor: 'red'
+ })),
+ transition('true => false', animate('1000ms linear')), // animation timing
+ transition('false => true', animate('1000ms linear'))
+ ])
+ ] // end of trigger block
+ })
+ export class ExampleComponent {
+ isGreen: string = 'true';
+
+ toggleIsCorrect() {
+ this.isGreen = this.isGreen === 'true' ? 'false' : 'true'; // change in data-bound value
+ }
+ }
+```
+
+El ejemplo anterior realiza un intercambio de color muy simple con cada clic del botón. Por supuesto, las transiciones de color rápidamente en un fundido lineal según `animate('1000ms linear')` . La animación se une al botón al hacer coincidir el primer argumento del `trigger(...)` con el `[@toggleClick]` animación `[@toggleClick]` .
+
+El enlace se enlaza al valor de `isGreen` desde la clase de componente. Este valor determina el color resultante según lo establecido por los dos métodos de `style(...)` dentro del bloque de `trigger(...)` . El enlace de animación es unidireccional, por lo que los cambios a `isGreen` en la clase de componente notifican el enlace de plantilla. Es decir, la animación de enlace `[@toggleClick]` .
+
+El elemento de botón en la plantilla también tiene un evento de `click` vinculado a él. Al hacer clic en el botón, `isGreen` valores. Esto cambia los datos de la clase de componente. El enlace de animación recoge esto e invoca su método `trigger(...)` . El `trigger(...)` encuentra dentro de la matriz de animaciones de los metadatos del componente. Dos cosas ocurren en la invocación del disparador.
+
+La primera aparición se refiere a los dos métodos de `state(...)` . El nuevo valor de `isGreen` coincide con el primer argumento del método `state(...)` . Una vez que coincida, los estilos de `style(...)` CSS `style(...)` aplican al estado final del elemento host del enlace de animación. \`El estado final entra en vigor después de toda la animación.
+
+Ahora para la segunda aparición. El cambio de datos que invocó el enlace de animación se compara entre los dos métodos de `transition(...)` . Uno de ellos hace coincidir el cambio en los datos con su primer argumento. El primer clic en el botón hizo que `isGreen` pasara de 'verdadero' a 'falso' ('verdadero => falso'). Eso significa que el primer método de `transition(...)` activa su segundo argumento.
+
+La función `animate(...)` correspondiente al método de `transition(...)` evaluado con éxito inicia. Este método establece la duración del fundido de color animado junto con el ritmo del fundido. La animación se ejecuta y el botón se desvanece en rojo.
+
+Este proceso puede ocurrir cualquier número de veces después de hacer clic en un botón. El color de `backgroundColor` del botón alternará entre verde y rojo en un fundido lineal.
+
+#### Estado de animacion
+
+La `transition(...)` micro-sintaxis vale la pena abordar en detalle. Angular determina las animaciones y su tiempo al evaluar esta sintaxis. Existen las siguientes transiciones de estado. Modelan un cambio en los datos vinculados a un enlace de animación.
+
+* `'someValue' => 'anotherValue'`
+
+Un activador de animación donde los datos enlazados cambian de 'someValue' a 'anotherValue'.
+
+* `'anotherValue' => 'someValue'`
+
+Un activador de animación donde los datos enlazados cambian de 'anotherValue' a 'someValue'.
+
+* `'someValue' <=> 'anotherValue'`
+
+Los datos cambian de 'someValue\` a' anotherValue 'o viceversa.
+
+También existe `void` y `*` estados. `void` indica que el componente está entrando o saliendo del DOM. Esto es perfecto para animaciones de entrada y salida.
+
+* `'someValue' => void` : el componente de host de los datos enlazados está _saliendo_ del DOM
+
+* `void => 'someValue'` : el componente host de los datos enlazados está _ingresando_ al DOM
+
+
+`*` denota un estado comodín. Los estados comodín pueden interpretar a "cualquier estado". Esto incluye el `void` y cualquier otro cambio en los datos enlazados.
+
+#### Fotogramas clave
+
+Este artículo tocó lo básico para animar aplicaciones angulares. Técnicas avanzadas de animación existen junto con estos conceptos básicos. Agrupar los fotogramas clave es una de estas técnicas. Está inspirado en la regla `@keyframes` CSS. Si ha trabajado con CSS `@keyframes` , ya entiende cómo funcionan los keyframes en Angular. Se convierte en una cuestión de sintaxis.
+
+El método de `keyframes(...)` se importa desde `@angular/animations` . Pasa al segundo argumento de `animate(...)` lugar del típico `AnimationStyleMetadata` . El método de `keyframes(...)` acepta un argumento como una matriz de `AnimationStyleMetadata` . Esto también puede denominarse una matriz de métodos de `style(...)` .
+
+Cada fotograma clave de la animación va dentro de la matriz de `keyframes(...)` . Estos elementos de fotograma clave son métodos de `style(...)` que admiten la propiedad de `offset` . `offset` indica un punto en la duración de la animación donde deben aplicarse las propiedades de estilo que lo acompañan. Su valor se extiende desde 0 (inicio de animación) hasta 1 (final de animación).
+
+```typescript
+import { Component } from '@angular/core';
+ import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
+
+ @Component({
+ selector: 'app-example',
+ styles: [
+ `.ball {
+ position: relative;
+ background-color: black;
+ border-radius: 50%;
+ top: 200px;
+ height: 25px;
+ width: 25px;
+ }`
+ ],
+ template: `
+ Arcing Ball Animation
+ Arc the Ball!
+
+ `,
+ animations: [
+ trigger('animateArc', [
+ state('true', style({
+ left: '400px',
+ top: '200px'
+ })),
+ state('false', style({
+ left: '0',
+ top: '200px'
+ })),
+ transition('false => true', animate('1000ms linear', keyframes([
+ style({ left: '0', top: '200px', offset: 0 }),
+ style({ left: '200px', top: '100px', offset: 0.50 }),
+ style({ left: '400px', top: '200px', offset: 1 })
+ ]))),
+ transition('true => false', animate('1000ms linear', keyframes([
+ style({ left: '400px', top: '200px', offset: 0 }),
+ style({ left: '200px', top: '100px', offset: 0.50 }),
+ style({ left: '0', top: '200px', offset: 1 })
+ ])))
+ ])
+ ]
+ })
+ export class ExampleComponent {
+ arc: string = 'false';
+
+ toggleBounce(){
+ this.arc = this.arc === 'false' ? 'true' : 'false';
+ }
+ }
+```
+
+La principal diferencia del ejemplo anterior en comparación con el otro ejemplo es el segundo argumento de `animate(...)` . Ahora contiene un método de `keyframes(...)` que hospeda una serie de fotogramas clave de animación. Si bien la animación en sí también es diferente, la técnica para animar es similar.
+
+Al hacer clic en el botón, el botón aparece en la pantalla. El arco se mueve según los elementos de la matriz (fotogramas clave) del método de `keyframes(...)` ). En el punto medio de la animación ( `offset: 0.50` ), la pelota cambia de trayectoria. Desciende a su altura original a medida que avanza por la pantalla. Al hacer clic en el botón de nuevo se invierte la animación.
+
+`left` y la `top` son propiedades animables después de establecer la `position: relative;` para el elemento. La propiedad de `transform` puede realizar animaciones similares basadas en movimiento. `transform` es una propiedad expansiva pero totalmente animable.
+
+Cualquier número de fotogramas clave puede existir entre el desplazamiento 0 y 1. Secuencias de animación complejas toman la forma de fotogramas clave. Son una de las muchas técnicas avanzadas en animaciones angulares.
+
+### Animaciones con enlace de host
+
+Sin duda, se encontrará con la situación en la que desea adjuntar una animación al elemento HTML de un componente en sí, en lugar de un elemento en la plantilla del componente. Esto requiere un poco más de esfuerzo, ya que no puede simplemente ingresar a la plantilla HTML y adjuntar la animación allí. En su lugar, tendrás que importar `HostBinding` y utilizar eso.
+
+El código mínimo para este escenario se muestra a continuación. Reutilizaré la misma condición de animación para el código anterior para mantener la coherencia y no muestro ninguno del código de animación real, ya que puede encontrarlo fácilmente arriba.
+
+```typescript
+import { Component, HostBinding } from '@angular/core';
+
+ @Component({
+ ...
+ })
+ export class ExampleComponent {
+ @HostBinding('@animateArc') get arcAnimation() {
+ return this.arc;
+ }
+ }
+```
+
+La idea detrás de animar el componente host es casi lo mismo que animar un elemento de la plantilla, con la única diferencia que es su falta de acceso al elemento que está animando. Todavía tiene que pasar el nombre de la animación ( `@animateArc` ) al declarar el `HostBinding` y todavía tiene que devolver el estado actual de la animación ( `this.arc` ). El nombre de la función no importa realmente, por lo que `arcAnimation` podría haberse cambiado a cualquier cosa, siempre y cuando no coincida con los nombres de propiedades existentes en el componente, y funcionaría perfectamente bien.
+
+#### Conclusión
+
+Esto cubre los fundamentos de la animación con Angular. Angular hace que la configuración de animaciones sea muy fácil usando Angular CLI. Comenzar con su primera animación solo requiere una clase de componente. Recuerda, las animaciones abarcan la plantilla del componente. Exporte su matriz de transiciones desde un archivo separado si planea usarla en múltiples componentes.
+
+Cada utilidad / método de animación se exporta desde `@angular/animations` . Todos trabajan juntos para proporcionar un sistema robusto de animación inspirado en CSS. Hay más métodos más allá de lo que este artículo podría cubrir.
+
+Ahora que ya sabe lo básico, siéntase libre de explorar los enlaces a continuación para obtener más información sobre animaciones angulares.
+
+## Fuentes
+
+* [Equipo angular. “Animaciones”. _Google_ . Accedido el 7 de junio de 2018.](https://angular.io/guide/animations)
+* [Equipo angular. “Paquete de animaciones”. _Google_ . Accedido el 7 de junio de 2018.](https://angular.io/api/animations)
+
+## Recursos
+
+* [Documentacion angular](https://angular.io/guide)
+* [Tutorial de animaciones angulares](https://angular.io/guide/animations)
+* [API de animaciones angulares](https://angular.io/api/animations)
+* [Repositorio Angular de GitHub](https://github.com/angular/angular)
+* [CLI angular](https://cli.angular.io)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/angular/command-line-interface/index.md b/client/src/pages/guide/spanish/angular/command-line-interface/index.md
new file mode 100644
index 0000000000..242e17fb93
--- /dev/null
+++ b/client/src/pages/guide/spanish/angular/command-line-interface/index.md
@@ -0,0 +1,130 @@
+---
+title: Command-line Interface
+localeTitle: Interfaz de línea de comandos
+---
+## Interfaz de línea de comandos
+
+#### Motivación
+
+Angular está estrechamente asociado con su interfaz de línea de comandos (CLI). El CLI agiliza la generación del sistema de archivos Angular. Se ocupa de la mayoría de las configuraciones detrás de la escena para que los desarrolladores puedan comenzar a codificar. El CLI también tiene una curva de aprendizaje baja recomendada para cualquier recién llegado que quiera saltar. ¡Caramba, incluso los desarrolladores de Angular más experimentados confían en el CLI!
+
+#### Instalación
+
+La CLI angular requiere [Node.js y Node Packet Manager (NPM)](https://nodejs.org/en/) . Puede verificar estos programas con el comando de terminal: `node -v; npm -v` . Una vez instalado, abra un terminal e instale la CLI angular con este comando: `npm install -g @angular/cli` . Esto puede ejecutarse desde cualquier lugar en su sistema. La CLI está configurada para uso global con el indicador `-g` .
+
+Verifique que la CLI esté allí con el comando: `ng -v` . Esto da como resultado varias líneas de información. Una de estas líneas indica la versión del CLI instalado.
+
+Reconozca que `ng` es el componente básico de la CLI. Todos tus comandos comenzarán con `ng` . Es hora de echar un vistazo a cuatro de los comandos más comunes con el prefijo `ng` .
+
+#### Comandos clave
+
+* ng nuevo
+
+* ng servir
+
+* ng generar
+
+* ng construir
+
+* ng actualización
+
+
+Los términos clave para cada uno de estos son bastante reveladores. Juntos, comprenden lo que necesitarás para comenzar a correr con Angular. Por supuesto, hay muchos más. Todos los comandos se describen en la [documentación 1 de GitHub de](https://github.com/angular/angular-cli/wiki#additional-commands) la [CLI](https://github.com/angular/angular-cli/wiki#additional-commands) . Es probable que encuentre que los comandos enumerados anteriormente cubrirán las bases necesarias.
+
+#### ng nuevo
+
+`ng new` crea un _nuevo_ sistema de archivos angular. Este es un proceso surrealista. Por favor, navegue a una ubicación de archivo deseable para la _nueva_ generación de aplicaciones. Escriba este comando de la siguiente manera, reemplazando `[name-of-app]` con lo que desee: `ng new [name-of-app]` .
+
+Debería aparecer un sistema de archivos en la carpeta `[name-of-app]` . Siéntete libre de explorar lo que hay dentro. Trate de no hacer ningún cambio todavía. Todo lo que necesita para ejecutar su primera aplicación Angular viene empaquetado en este sistema de archivos generado.
+
+#### ng servir
+
+Para que la aplicación se ejecute, el comando `ng serve` debe ejecutarse dentro de la carpeta `[name-of-app]` . Cualquier lugar dentro de la carpeta hará. La CLI angular debe reconocer que está dentro de un entorno generado con `ng new` . Se ejecutará siempre que esta condición. Anímate y pruébalo: `ng serve` .
+
+La aplicación se ejecuta en el puerto 4200 por defecto. Puede ver la aplicación Angular navegando a `localhost:4200` en cualquier navegador web. Trabajos angulares en todos los navegadores. A menos que esté utilizando una versión anterior de Internet Explorer, la aplicación se abrirá. Muestra el logotipo oficial de Angular junto con una lista de enlaces útiles.
+
+Ok, la aplicación se ejecuta. Esperemos que funcione, pero necesita saber qué está pasando debajo del capó. Consulte el sistema de archivos `[name-of-app]` . Navegue `[name-of-app] -> src -> app` . Ahí están los archivos responsables de lo que viste en `localhost:4200` .
+
+#### ng generar
+
+Los archivos `.component` definen un componente angular que incluye su lógica ( `.ts` ), estilo ( `.css` ), diseño ( `.html` ) y pruebas ( `.spec.ts` ). La `app.module.ts` destaca especialmente. Juntos, estos dos grupos de archivos trabajan juntos como `component` y `module` . Tanto el `component` como el `module` son dos ejemplos separados de esquemas angulares. Los esquemas clasifican los diferentes bloques de código _orientados_ a un _propósito generable_ con `ng generate` .
+
+Por el bien de este artículo, entienda que un `module` exporta e importa activos hacia y desde un árbol de componentes subyacente. Un `component` ocupa de una sección de la interfaz de usuario. La lógica, el estilo, el diseño y las pruebas de esa unidad permanecen encapsulados dentro de los diversos archivos `.component` .
+
+En cuanto a `ng generate` , este comando puede generar esqueletos para cada uno de los [esquemas angulares 2](https://github.com/angular/angular-cli/wiki/generate#available-schematics) disponibles. Vaya a `[name-of-app -> src -> app]` . Intente generar un nuevo `component` ejecutando: `ng generate component [name-of-component]` . Reemplace `[name-of-component]` con lo que quiera. Aparecerá un nuevo archivo `[name-of-component]` junto con sus archivos de `component` necesarios.
+
+Puedes ver que `ng generate` acelera el [código de](https://en.wikipedia.org/wiki/Boilerplate_code) Angular. `ng generate` también cables de las cosas. Los esquemas creados dentro del contexto de un sistema de archivos Angular se conectan con el módulo raíz del sistema. En este caso, sería el archivo `app.module.ts` dentro de `[name-of-app -> src -> app]` .
+
+#### ng construir
+
+Angular es una herramienta frontal. El CLI realiza sus operaciones en nombre de la interfaz de usuario. `ng serve` se encarga de la configuración del servidor back-end. Esto mantiene el desarrollo completamente enfocado en la parte frontal. Dicho esto, también debe ser posible conectar su propio back-end a la aplicación Angular.
+
+`ng build` satisface esta necesidad. Antes de probarlo dentro del sistema de archivos. Vaya a `[name-of-app] -> angular.json` . Busque esta única línea de código: `"outputPath": "dist/my-app"` .
+
+Esta única línea de configuración determina dónde `ng build` descarga sus resultados. Los resultados son la aplicación Angular completa compilada en una carpeta `dist/my-app` . Dentro de esa carpeta, existe `index.html` . Toda la aplicación Angular puede ejecutarse con `index.html` . No es necesario ningún `ng serve` desde aquí. Con este archivo, puede conectar fácilmente su extremo posterior.
+
+Dale una oportunidad: `ng build` . De nuevo, esto debe ejecutarse dentro del sistema de archivos Angular. Basado en el valor clave de `“outputPath:”` en `angular.json` . Se generará un archivo en el que la aplicación original está completamente compilada. Si mantienes el mismo `“outputPath:”` , la aplicación compilada estará en: `[name-of-app] -> dist -> [name-of-app]` .
+
+#### ng actualización
+
+En la actualización angular, haga una actualización automática de todos los paquetes angulares y npm a las últimas versiones.
+
+Aquí está la sintaxis y las opciones se pueden usar con `ng update` .
+
+`ng update [package]`
+
+**Opciones**
+
+* correr en seco `--dry-run (alias: -d)`
+
+ Ejecutar sin hacer ningún cambio.
+
+* fuerza `--force`
+
+ Si es falso, se producirá un error si los paquetes instalados son incompatibles con la actualización.
+
+* todas `--all`
+
+ Ya sea para actualizar todos los paquetes en package.json.
+
+* siguiente `--next`
+
+ Usa la versión más grande, incluyendo beta y RCs.
+
+* solo migrar `--migrate-only`
+
+ Solo realiza una migración, no actualiza la versión instalada.
+
+* de `--from`
+
+ Versión desde la cual migrar. Solo disponible con un único paquete que se está actualizando, y solo en migración solamente.
+
+* a `--to`
+
+ Versión según la cual aplicar las migraciones. Solo disponible con un solo paquete que se actualiza, y solo en migraciones solamente. Requiere de a ser especificado. Predeterminado a la versión instalada detectada.
+
+* registro `--registry`
+
+ El registro de NPM a utilizar.
+
+
+#### Conclusión
+
+Estos comandos cumplen con los conceptos básicos. La CLI de Angular es una comodidad increíble que acelera la generación, configuración y expansión de aplicaciones. Hace todo esto mientras mantiene la flexibilidad, lo que permite al desarrollador hacer los cambios necesarios.
+
+Por favor revise esos enlaces en `localhost:4200` si aún no lo ha hecho. No olvides ejecutar `ng serve` antes de abrirlo. Con una mejor comprensión de la CLI, ahora está listo para aprender más sobre lo que se genera con sus comandos más esenciales.
+
+### Fuentes
+
+1. [Google. "Angular / angular-cli / wiki # comandos-adicionales". GitHub.](https://github.com/angular/angular-cli/wiki#additional-commands)
+
+2. [Google. “Angular / angular-cli / wiki / genera # esquemas disponibles”. GitHub.](https://github.com/angular/angular-cli/wiki/generate#available-schematics)
+
+
+### Recursos
+
+* [Sitio web de CLI angular](https://cli.angular.io)
+
+* [CLI LECTURA angular](https://github.com/angular/angular-cli#angular-cli)
+
+* [Documentación de CLI angular](https://github.com/angular/angular-cli/wiki)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/angular/components/index.md b/client/src/pages/guide/spanish/angular/components/index.md
new file mode 100644
index 0000000000..1575c6895a
--- /dev/null
+++ b/client/src/pages/guide/spanish/angular/components/index.md
@@ -0,0 +1,271 @@
+---
+title: Components
+localeTitle: Componentes
+---
+# Componentes
+
+#### Motivación
+
+Angular contiene muchos _esquemas_ para aplicaciones de construcción. Los componentes son uno de esos esquemas. Abarcan una sola unidad de lógica relacionada con una sola parte de la aplicación. Los componentes a menudo se asocian con otros esquemas para operar de manera más efectiva.
+
+Entre todos los esquemas, los componentes tienden a consumir más de lo que proporcionan. Mientras que otros esquemas como directivas, tuberías y servicios ofrecen utilidad, los componentes se utilizan. Son responsables de la interfaz de la aplicación, por lo que tiene sentido el uso de la utilidad.
+
+Los componentes simplifican la aplicación. Su principal objetivo es canalizar la lógica en una sola sección de la interfaz visible. Para compilar aplicaciones paso a paso, debe compilar componente por componente. Los componentes actúan como bloques de construcción de Angular después de todo.
+
+#### Introducción de componentes
+
+Como se mencionó, los componentes consumen utilidad (servicios / recursos). Se interponen entre la lógica empresarial y la presentación para producir una unidad cohesiva. Angular une diversos mecanismos a cada componente. Estos adjuntos identifican una clase como un componente y definen sus capacidades estándar.
+
+Angular debe reconocer componentes cuando se encuentra con ellos. Para hacer esto, `@Component` debe decorar cada clase que pretende ser un componente. Los decoradores indican a Angular lo que es la clase '.
+
+En el caso de un componente, debe saber cómo interactuar con su inyector, conectarse con una plantilla, extraer de una lista de estilos, encapsular sus estilos, etc. Angular se encarga de la mayoría de los requisitos de bajo nivel. Los desarrolladores aún necesitan configurar el comportamiento de un componente, importar sus dependencias y extender su lógica.
+
+Para todas esas cosas, tenemos la clase del componente. La clase mantiene todo relativamente uniforme. Se encapsula la lógica empresarial del componente.
+
+#### Clase de componente y metadatos
+
+Continúe e instale la [interfaz de línea de comandos Angular (CLI)](https://cli.angular.io) . Puedes aprender más sobre esto en [este artículo](https://guide.freecodecamp.org/angular/command-line-interface) . El comando CLI `ng generate component [name-of-component]` produce lo siguiente.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+
+ @Component({
+ selector: 'app-example',
+ templateUrl: './example.component.html',
+ styleUrls: ['./example.component.css']
+ })
+ export class ExampleComponent implements OnInit {
+ constructor() { }
+
+ ngOnInit() { }
+ }
+```
+
+Este es el esqueleto básico del cual se originan todos los grandes componentes. El decorador `@Component` es la parte más importante. Sin ella, el ejemplo anterior se convierte en una clase genérica. Angular confía en los decoradores para discernir el tipo de esquema de una clase.
+
+`@Component` recibe metadatos como un solo objeto. Los decoradores son solo funciones de JavaScript bajo el capó. Toman argumentos como con el objeto de metadatos. El objeto de metadatos configura las dependencias básicas de un componente. Cada campo juega un papel.
+
+* `selector:` le dice a Angular que asocie el componente con un determinado elemento en la plantilla HTML de la aplicación.
+
+* `templateUrl:` acepta la ubicación del archivo HTML de la plantilla del componente (aquí es donde se muestran los datos).
+
+* `styleUrls:` acepta una matriz de ubicaciones de archivos de hojas de estilo (cadenas). Estas hojas de estilo apuntan a la plantilla asignada del componente.
+
+
+Piense en los metadatos como un gran blob de configuración. El decorador lo toma para que pueda generar los datos específicos del componente. El decorador _decora_ la clase subyacente con los datos necesarios para el comportamiento de su clase. Una clase _componente_ que es.
+
+La firma de la clase se exporta de forma predeterminada para que se pueda importar el componente. `ngOnInit` también se implementa. `implements` le dice a la clase que defina ciertos métodos según la definición de la interfaz. `ngOnInit` es un gancho de ciclo de vida.
+
+#### Componente del ciclo de vida y detección de cambios
+
+Los componentes utilizan todo tipo de herramientas, servicios y características. Una característica clave disponible para los componentes son los ganchos del ciclo de vida. Una explicación para cada gancho existe [en este artículo](https://guide.freecodecamp.org/angular/lifecycle-hooks) .
+
+Hay un total de ocho y todas ellas sirven como funciones de temporización. Se ejecutan condicionalmente como las transiciones de componentes de estado a estado a través de la [detección de cambios](https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f) . Este proceso ocurre constantemente en el árbol de componentes. Busca cambios en los datos que merecen una representación de la plantilla.
+
+Tiempo de seguir adelante. Consulte los artículos mencionados anteriormente para obtener más información sobre el ciclo de vida de los componentes. Merece mucha más explicación.
+
+#### Datos del componente
+
+Los datos impulsan todo. Los componentes no son una excepción. Los componentes encapsulan todos sus datos. Para recibir datos externamente, un componente debe declararlo explícitamente. Esta forma de privacidad evita que la información entre en conflicto en el árbol de componentes.
+
+Los datos determinan lo que se muestra desde la clase de componente a su plantilla. Cualquier actualización de los datos de la clase (o al menos debería) actualizará la visualización de la plantilla.
+
+Los componentes a menudo inicializan un conjunto de miembros (o variables) que almacenan datos. Se utilizan en toda la lógica de la clase de componentes para mayor comodidad. Esta información alimenta la lógica que resulta en la plantilla y su comportamiento. Vea el siguiente ejemplo.
+
+```typescript
+// ./components/example/example.component.ts
+
+ import { Component, OnInit } from '@angular/core';
+ import { Post, DATA } from '../../data/posts.data';
+
+ @Component({
+ selector: 'app-example',
+ templateUrl: './example.component.html'
+ })
+ export class ExampleComponent implements OnInit {
+ username: string;
+ totalPosts: number;
+ allPosts: Post[];
+
+ deletePost(index: number): void {
+ this.allPosts.splice(index, 1);
+ this.totalPosts = this.allPosts.length;
+ }
+
+ ngOnInit(): void {
+ this.username = DATA.author;
+ this.totalPosts = DATA.thePosts.length;
+ this.allPosts = DATA.thePosts;
+ }
+ }
+```
+
+```html
+
+
+
+ {{ username }}
+ Change Name: Posts: {{ totalPosts }}
+
+
+
DELETE
+
{{ post.title }}
+
{{ post.body }}
+
+
+```
+
+Tenga en cuenta las formas en que el componente interactúa con sus datos. Primero lo obtiene de `../../data/posts.data` antes de comenzar a reenviarlo a la plantilla para su visualización.
+
+Los datos aparecen en toda la plantilla. Dentro de las llaves dobles, el valor de una variable se asigna desde la clase de componente a las llaves. El `*ngFor` recorre la `allPosts` clase `allPosts` . Al hacer clic en el botón, se elimina un elemento específico de `allPosts` por su índice. Incluso puede cambiar el `username` de `username` superior escribiendo en el cuadro de entrada.
+
+Las interacciones anteriores modifican los datos de la clase del componente que a su vez actualiza la plantilla HTML del componente. Los componentes proporcionan la lógica de la red troncal que facilita el flujo de datos. La plantilla HTML hace que los datos sean legibles para el usuario.
+
+#### Plantilla de componente
+
+La plantilla HTML del ejemplo anterior presentaba una sintaxis interesante. La sintaxis no era HTML real. Era la plantilla HTML de Angular. Algunos a menudo se refieren a que tiene HTML _Plus_ reconocible solo por el compilador de Angular. El compilador soporta una sintaxis que resulta en la manipulación dinámica de HTML. Este artículo a menudo se referirá a él como 'plantilla HTML' o 'plantilla'.
+
+La sintaxis permite a los componentes inyectar datos directamente en la plantilla HTML. La inyección es dinámica. Es decir, los datos pueden iterar y mostrarse como HTML sin necesidad de asistencia externa. El compilador Angular lo compila en HTML real en el momento en que llega al navegador web.
+
+Para obtener más información sobre algunas de las formas en que los datos se unen a la plantilla, lea sobre [el enlace de datos en Angular](https://guide.freecodecamp.org/angular/data-binding) . Algunos ejemplos de enlace de datos ocurrieron en el ejemplo anterior ( `{{ ... }}` ). Para este artículo, es suficiente reconocer que las interacciones de datos ocurrieron entre la clase de componente y su plantilla.
+
+#### Consultar la plantilla
+
+Los datos que gestionan el estado de la plantilla funcionan de forma imperativa y están bien. Sin embargo, los datos puros no siempre cumplen con el diseño previsto de una aplicación. Puede ser necesario interactuar más directamente con el Modelo de objetos de documento (DOM).
+
+Para hacer eso, el componente debe tener referencia a los elementos de la plantilla. Cuando los datos cambian, el componente puede manipular el DOM explícitamente. Este es un enfoque más declarativo.
+
+Los componentes pueden capturar referencias utilizando la interfaz de programación de aplicaciones (API) de un navegador web. Aunque mala idea Angular prefiere la compatibilidad multiplataforma. Para que un componente funcione fuera del navegador web, necesita usar la API de Angular en lugar de los DOM.
+
+Los componentes pueden consultar sus plantillas utilizando los decoradores `@ViewChild` y `ContentChild` . Recogen referencias a elementos de plantilla en nombre de la clase de componente.
+
+```typescript
+import { Component, ViewChild, ContentChild, ElementRef, Renderer2, AfterContentChecked, AfterViewChecked } from '@angular/core';
+
+ @Component({
+ selector: 'app-child',
+ template: `
+ Toggle Enlarge
+ Toggle Highlight
+ View Child
+
+ Content Child
+
+ `
+ })
+ export class ParentComponent implements AfterViewChecked {
+ @ViewChild("hOneRefereance", { read: ElementRef }) hOneElement: ElementRef;
+ textHighlight: boolean = false;
+
+ constructor(private renderer: Renderer2) { }
+
+ toggleHighlight() {
+ this.textHighlight = !this.textHighlight;
+ }
+
+ ngAfterViewChecked() {
+ if (this.textHighlight)
+ this.renderer.setStyle(this.hOneElement.nativeElement, 'background-color', 'yellow');
+ else
+ this.renderer.setStyle(this.hOneElement.nativeElement, 'background-color', 'initial');
+ }
+ }
+```
+
+El ejemplo anterior contiene dos botones que alternan un cierto estilo para cada elemento. Al hacer clic en los botones se alternan los valores verdaderos / falsos únicos de cada componente. Estos booleanos determinan si se aplican los estilos personalizados. En lugar de que estos valores causen cambios de forma imperativa, el ciclo de vida se enlaza ( `ngAfterViewChecked` y `ngAfterContentChecked` ) altera de forma declarativa el DOM.
+
+El enfoque declarativo cambia explícitamente el estilo a través de la referencia del elemento. En la programación imperativa, los cambios en los datos basados en DOM son implícitos. Echa un vistazo a este artículo sobre programación [imperativa y declarativa](https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2) para obtener más información.
+
+Lo principal a tener en cuenta es cómo estas referencias se extraen de la plantilla. En el ejemplo, hay dos secciones de la plantilla consultadas usando dos decoradores: `@ViewChild` y `@ContentChild` .
+
+Se diferencian en dónde buscan la referencia de un elemento, ya sea en el contenido DOM o en la vista DOM. Estos dos DOM existen en la plantilla de ParentComponent. La diferenciación entre ellos es importante porque terminan de renderizarse en momentos separados.
+
+Esta es la razón `@ViewChild` cual `@ViewChild` y `@ContentChild` existen. Trabajan juntos con sus ganchos de ciclo de vida complementarios `ngAfterViewChecked` y `ngAfterContentChecked` . Estos enganches de ciclo de vida esperan que sus respectivas consultas se resuelvan antes de ejecutarse.
+
+Una vez resuelto, `@ViewChild` y `@ContentChild` proporcionan referencias a dos elementos. Ambos existen en partes separadas del DOM. Los datos booleanos todavía determinan el resultado. Cómo se traduce ese resultado al DOM es la diferencia clave de antes. El DOM se actualiza a través de la manipulación directa de `Renderer2` .
+
+#### Proyección de contenido
+
+El contenido DOM existe en el elemento innerHTML del elemento `
` mediante `@ContentChild` . El contenido contenido dentro de `innerHTML
+```
+
+Tengan paciencia en este caso.
+
+`[property]` refleja la propiedad en el nodo objeto del elemento Modelo de objeto de dominio (DOM). No confunda las propiedades del objeto con los atributos de un elemento DOM. Las propiedades y los atributos a menudo comparten el mismo nombre y hacen lo mismo. Sin embargo, hay una distinción clara.
+
+Recuerde que `attr` (atributos) es una propiedad única del objeto DOM subyacente. Se declara en la instanciación del DOM con valores de atributos que coinciden con la definición del elemento. Mantiene el mismo valor después de eso. Cada una de las propiedades tiene su propio campo clave-valor en un nodo de objeto DOM. Estas propiedades son mutables post-instanciación.
+
+Conoce la diferencia entre atributos y propiedades. Esto conducirá a una mejor comprensión de cómo Angular vincula datos a propiedades (enlace de propiedades). Angular casi nunca vinculará datos a los atributos de un elemento. Las excepciones a esto son muy raras. Una última vez: ¡Angular une datos de componentes a propiedades, no a atributos!
+
+Con referencia al ejemplo, el `[ … ]` en la asignación de propiedades del elemento tiene un significado especial. Los paréntesis muestran que la `property` está vinculada a `“value”` a la derecha de la asignación.
+
+`value` también tiene un significado especial dentro del contexto de los paréntesis. `value` por sí mismo es una cadena literal. Angular lo lee y compara su valor con los miembros de la clase de componentes. Angular sustituirá el valor del atributo de miembro coincidente. Por supuesto, esto se refiere a la misma clase de componente que aloja la plantilla HTML.
+
+El flujo unidireccional de datos del componente a la plantilla está completo. El miembro que coincide con la asignación correcta de la propiedad entre corchetes proporciona el `value` . Tenga en cuenta que los cambios en el valor del miembro en la clase de componente se filtran hasta la plantilla. Esa es la detección del cambio de Angular en el trabajo. Los cambios dentro del alcance de la plantilla no tienen efecto en el miembro de la clase de componente.
+
+Retiro clave: la clase de componente proporciona los datos mientras que la plantilla los muestra.
+
+No mencioné que los valores de los datos también pueden aparecer en el `innerHTML` un componente. Este último ejemplo implementa llaves dobles. Angular reconoce estos aparatos e interpola los datos de clase de componente correspondiente en el `innerHTML` del `div` .
+
+```html
+
+The value of the component class member 'value' is {{value}}.
+```
+
+#### Manejo de eventos
+
+Si el componente suministra datos, entonces la plantilla suministra eventos.
+
+```typescript
+// my.component.ts
+ @Component({
+ templateUrl: './my.component.html'
+ })
+
+ export class MyComponent {
+ handler(event):void {
+ // function does stuff
+ }
+ }
+```
+
+```html
+
+// my.component.html
+ innerHTML
+```
+
+Esto funciona de manera similar a la unión de propiedades.
+
+El `(event)` pertenece a cualquier tipo de evento válido. Por ejemplo, uno de los tipos de eventos más comunes es `click` . Se emite al _hacer clic con_ el ratón. Independientemente del tipo, el `event` está vinculado a `“handler”` en el ejemplo. Los controladores de eventos suelen ser funciones miembro de la clase de componente.
+
+Los `( … )` son especiales para Angular. Los paréntesis indican a Angular que un evento está limitado a la asignación correcta del `handler` . El evento en sí se origina en el elemento host.
+
+Cuando el evento se emite, pasa el objeto Evento en forma de `$event` . El `handler` asigna a la función de `handler` nombre idéntico de la clase de componente. El intercambio unidireccional desde el elemento vinculado a evento a la clase de componente está completo.
+
+La emisión de eventos desde el controlador, mientras sea posible, no afecta al elemento de plantilla. La unión es unidireccional después de todo.
+
+#### Encuadernación bidireccional
+
+Los formularios de entrada proporcionan un gran ejemplo de por qué es necesaria la vinculación bidireccional. Los enlaces de datos bidireccionales son más costosos que los enlaces de eventos o propiedades.
+
+El enlace de datos bidireccional tiene su propio módulo. Antes de echar un vistazo a eso, considere el siguiente ejemplo.
+
+```typescript
+// my.component.ts
+ @Component({
+ templateUrl: './my.component.html'
+ })
+ export class MyComponent {
+ inputValue:string = "";
+
+ handler(event) {
+ this.inputValue = event.target.value;
+ }
+ }
+```
+
+```html
+
+
+ Highlighted Text!
+```
+
+`Renderer2` también se instancia. ¿De qué inyector provienen estos servicios? Bueno, el código fuente de cada servicio proviene de `@angular/core` . Estos servicios deben registrarse con el inyector raíz de la aplicación.
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+ import { NgModule } from '@angular/core';
+ import { AppComponent } from './app.component';
+ import { HighlightDirective } from './directives/highlight.directive';
+
+ @NgModule({
+ declarations: [
+ AppComponent,
+ HighlightDirective
+ ],
+ imports: [
+ BrowserModule
+ ],
+ providers: [],
+ bootstrap: [
+ AppComponent
+ ]
+ })
+ export class AppModule { }
+```
+
+¿Una matriz de proveedores vacía? No tener miedo. Angular registra muchos servicios con el inyector de raíz automáticamente. Esto incluye `ElementRef` y `Renderer2` . En este ejemplo, estamos administrando el elemento host a través de su interfaz derivada de la `ElementRef` de instancias de `ElementRef` . `Renderer2` nos permite actualizar el DOM a través del modelo de vista de Angular.
+
+Puedes leer más sobre las vistas de [este artículo](https://guide.freecodecamp.org/angular/views) . Son el método preferido para las actualizaciones de DOM / view en aplicaciones Angular.
+
+Es importante reconocer el papel que desempeñan los inyectores en el ejemplo anterior. Al declarar tipos de variables en el constructor, la clase obtiene servicios valiosos. El tipo de datos de cada parámetro se asigna a un conjunto de instrucciones dentro del inyector. Si el inyector tiene ese tipo, devuelve una instancia de dicho tipo.
+
+#### Servicios de instanciación
+
+El artículo de [Servicios e inyectores](https://guide.freecodecamp.org/angular/services-and-injectors) explica esta sección en cierta medida. Sin embargo, esta sección repite la sección anterior o la mayor parte. Los servicios a menudo proporcionarán referencias a otra cosa. También pueden proporcionar una interfaz que amplíe las capacidades de una clase.
+
+El siguiente ejemplo definirá un servicio de registro que se agrega al inyector de un componente a través de sus `providers: []` metadatos.
+
+```typescript
+// services/logger.service.ts
+
+ import { Injectable } from '@angular/core';
+
+ @Injectable()
+ export class LoggerService {
+ callStack: string[] = [];
+
+ addLog(message: string): void {
+ this.callStack = [message].concat(this.callStack);
+ this.printHead();
+ }
+
+ clear(): void {
+ this.printLog();
+ this.callStack = [];
+ console.log(“DELETED LOG”);
+ }
+
+ private printHead(): void {
+ console.log(this.callStack[0] || null);
+ }
+
+ private printLog(): void {
+ this.callStack.reverse().forEach((log) => console.log(message));
+ }
+ }
+```
+
+```typescript
+// app.component.ts
+
+ import { Component } from '@angular/core';
+ import { LoggerService } from './services/logger.service';
+
+ @Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ providers: [LoggerService]
+ })
+ export class AppComponent {
+ constructor(private logger: LoggerService) { }
+
+ logMessage(event: any, message: string): void {
+ event.preventDefault();
+ this.logger.addLog(`Message: ${message}`);
+ }
+
+ clearLog(): void {
+ this.logger.clear();
+ }
+ }
+```
+
+```html
+
+// app.component.html
+
+ Log Example
+
+
+ Delete Logged Messages
+ CLEAR
+```
+
+Centrarse en el constructor de AppComponent y los metadatos. El inyector de componentes recibe instrucciones del campo de metadatos del proveedor que contiene LoggerService. El inyector entonces sabe de qué instanciase LoggerService a partir de lo solicitado en el constructor.
+
+El parámetro constructor `loggerService` tiene el tipo `LoggerService` que reconoce el inyector. El inyector sigue a través de la instanciación como se mencionó.
+
+#### Conclusión
+
+La inyección de dependencia (DI) es un paradigma. La forma en que funciona en Angular es a través de una jerarquía de inyectores. Una clase recibe sus recursos sin tener que crearlos o conocerlos. Los inyectores reciben instrucciones y ejemplifican un servicio dependiendo de cuál fue solicitado.
+
+DI aparece mucho en Angular. La documentación oficial de Angular explica por qué el paradigma prevalece tanto. También continúan describiendo los numerosos casos de uso para DI en forma Angular más allá de lo que se discutió en este artículo. ¡Compruébalo haciendo clic abajo!
+
+## Fuentes
+
+* [Equipo angular. “Patrón de inyección de dependencia”. _Google_ . Consultado el 1 de junio de 2018](https://angular.io/guide/dependency-injection-pattern)
+
+* [Zuev, Alexey. “Lo que siempre quiso saber sobre el árbol de inyección de dependencia angular”. _Angular en profundidad_ , 21 de marzo de 2018. Consultado el 1 de junio de 2018](https://blog.angularindepth.com/angular-dependency-injection-and-tree-shakeable-tokens-4588a8f70d5d)
+
+
+## Recursos
+
+* [Documentacion angular](https://angular.io/guide/pipes)
+
+* [Repositorio Angular de GitHub](https://github.com/angular/angular)
+
+* [Introducción a la inyección de dependencia](https://angular.io/guide/architecture-services)
+
+* [Inyección de Dependencia Avanzada](https://angular.io/guide/dependency-injection-pattern)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/angular/directives/index.md b/client/src/pages/guide/spanish/angular/directives/index.md
new file mode 100644
index 0000000000..4f838a4732
--- /dev/null
+++ b/client/src/pages/guide/spanish/angular/directives/index.md
@@ -0,0 +1,332 @@
+---
+title: Directives
+localeTitle: Directivas
+---
+# Directivas
+
+#### Motivación
+
+Las directivas son fundamentales para la plantilla HTML de Angular. Los componentes son el ejemplo más significativo. Cada vista de componente se representa debajo de una vista de componente raíz. Esto puede resultar en un árbol de vistas que define una sola aplicación. Una vista constituye una clase ( `component.ts` ) y su plantilla ( `component.html` ).
+
+Otras directivas, aunque no son tan críticas, proporcionan una flexibilidad muy necesaria. Una directiva colocada en un elemento tiene control completo sobre él. El uso de `example works!
+```
+
+Insertar ExampleComponent como el hijo de otro componente se vería como el siguiente.
+
+```html
+
+
+
+ Welcome to AnotherComponent.
+ Check out ExampleComponent!
+
+
+ This is the end of the AnotherComponent template HTML.
+```
+
+Preste atención a `
+
Hello!
+
+
+
+
+
Hi!
+
+```
+
+Este es un ejemplo artificial. Cualquier valor de miembro de la clase de componente de la plantilla puede sustituirse por `true` o `false` .
+
+NOTA: También puede hacer lo siguiente con \* ngIf para obtener acceso al valor de observación
+
+```html
+
+
+ {{ anyNameYouWant }}
+
+```
+
+##### \* ngPara
+
+`*ngFor` bucles basados en una expresión _microsintáctica_ asignada por el derecho. Microsyntax se mueve más allá del alcance de este artículo. Sepa que la microsyntax es una forma corta de expresión lógica. Ocurre como una sola cadena capaz de hacer referencia a valores de miembros de clase. Puede enlazar valores iterables lo que lo hace útil para `*ngFor` .
+
+```html
+
+
+
+ Potato {{ i + 1 }}: {{ potato }}
+
+
+
+```
+
+`['Russet', 'Sweet', 'Laura']` es un valor iterable. Las matrices son uno de los iterables más comunes. El `*ngFor` escupe un nuevo `
+ {{ anyNameYouWant }}
+
+```
+
+##### \* ngSwitchCase y \* ngSwitchDefault
+
+Estas dos directivas estructurales trabajan juntas para proporcionar la funcionalidad de `switch` a la plantilla HTML.
+
+```html
+
+
+
{{ potato }} is a Russet Potato.
+ {{ potato }} is a Sweet Potato.
+ {{ potato }} is a Laura Potato.
+ {{ potato }} is not a Russet, Sweet, nor Laura Potato.
+
+```
+
+Solo una de las expresiones `*ngSwitch…` renderiza. Observe el atributo `[ngSwitch]` dentro del elemento `div` que envuelve el conmutador. Esto pasa el valor de la `potato` largo de la cadena `*ngSwitch...` Esta cadena de directivas estructurales determina qué elemento `h1` se procesa.
+
+Como tal, `[ngSwitch]` no es una directiva estructural a diferencia de las declaraciones `*ngSwitch…` Pasa el valor a lo largo mientras que el bloque de conmutación determina el diseño final de HTML.
+
+Recuerde que la estilización y la transferencia de valores no son responsabilidad de las directivas estructurales. Eso concierne a las directivas de atributos. Directivas estructurales determinan sólo el diseño.
+
+#### Directiva estructural de creación [1](https://angular.io/guide/structural-directives)
+
+Hay algo importante que entender sobre los ejemplos anteriores. Todos ellos son taquigrafía al principio asterisco ( `*` ). `ng-template` se utiliza debajo del capó en cada aplicación del asterisco.
+
+`ng-template` define directivas estructurales. Explica cómo pueden configurar la plantilla HTML para producir HTML real. Comience por crear una directiva con `ng generate directive [name-of-directive]` . Reemplace `[name-of-directive]` con un nombre preferible. El comando produce lo siguiente.
+
+```typescript
+import { Directive } from '@angular/core';
+
+ @Directive({
+ selector: '[appExample]'
+ })
+ export class ExampleDirective {
+ constructor() { }
+ }
+```
+
+Este esqueleto directivo es bastante desnudo. Todavía no sabe si estamos construyendo una directiva estructural o de atributos. El `selector: '[appExample]'` le dice a Angular a qué atributo se asigna la directiva. Ya que está creando una directiva estructural, modifique el esqueleto de la siguiente manera.
+
+```typescript
+Import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+
+ @Directive({
+ selector: '[appExample]'
+ })
+ export class ExampleDirective {
+ @Input() set appExample(booleanValue: boolean) {
+ if (booleanValue) {
+ this.ngTemplate.createEmbeddedView(this.innerHTMLOfTemplateScope);
+ }
+ else {
+ this.ngTemplate.clear();
+ }
+ }
+
+ constructor(
+ private innerHTMLOfTemplateScope:TemplateRef,
+ private ngTemplate:ViewContainerRef
+ ) { }
+ }
+```
+
+Incluir un elemento arbitrario con el atributo `appExample` sirve como un buen ejemplo.
+
+```html
+
+innerHTML content
+
+```
+
+Esto es mucho para `@Input() set ...` . El conjunto de `@Input() set ...` es una declaración de miembro establecedor. Se ejecuta cuando el atributo `appExample` aparece dentro de un elemento y se le asigna un valor booleano. La función de establecimiento recibe ese valor booleano como su parámetro para la ejecución.
+
+`TemplateRef` referencia al innerHTML de `` y `ViewContainerRef` .
+
+De hecho, el ExampleDirective anterior imita la funcionalidad de `*ngIf` !
+
+```html
+
+
+
+
Hello!
+
+
+
+
+
Hi!
+
+```
+
+Nunca olvides el asterisco ( `*` ). Es una abreviatura para el elemento `ng-template` que hace referencia nuestra clase directiva.
+
+#### Directiva de Atributos
+
+Las directivas de atributos son similares a las estructurales. Excepto, las directivas de atributos tienen efecto cero en el diseño HTML. No implementan `This text is purple!
+ This text is blue!
+ This text is red!
+```
+
+`ElementRef` proporciona una referencia directa al elemento host. `ElementRef.nativeElement` toma el nodo DOM. Con el nodo, el estilo del componente es tan simple como `this.host.nativeElement.style.color = color` .
+
+`@Input() set ...` es otra función de establecimiento que lee el valor que se le asigna en su implementación como un atributo. Se reasigna la propiedad de color de la hoja de estilo de cada elemento.
+
+#### Conclusión
+
+Las directivas son una herramienta poderosa disponible en la plantilla HTML de Angular. Son cómo los componentes se conectan entre sí. Dentro de cada componente proporcionan un medio de estilo y diseño.
+
+Hay muchas otras opciones para construir cada tipo de directiva. Desafortunadamente, cubrir cada uno es demasiado para un artículo. Tener una comprensión básica de las directivas es suficiente para avanzar con recursos más avanzados.
+
+Echa un vistazo a los siguientes recursos para bucear más profundo. Hay enlaces para cada tipo de directiva. Cada enlace es parte de la misma documentación, por lo que no es necesario volver aquí después de visitar el primer enlace.
+
+## Fuentes
+
+1. [Equipo angular. _Directivas estructurales_ . Google. Consultado el 28 de mayo de 2018](https://angular.io/guide/structural-directives)
+
+2. [Equipo angular. _Directivas de atributos_ . Google. Consultado el 28 de mayo de 2018](https://angular.io/guide/attribute-directives)
+
+
+## Recursos
+
+* [Documentacion angular](https://angular.io/guide/pipes)
+
+* [Repositorio Angular de GitHub](https://github.com/angular/angular)
+
+* [Componentes angulares](https://angular.io/guide/architecture-components)
+
+* [Directivas estructurales angulares](https://angular.io/guide/structural-directives)
+
+* [Directivas de atributos angulares](https://angular.io/guide/attribute-directives)
+
+* [CLI angular](https://cli.angular.io)
\ No newline at end of file
diff --git a/client/src/pages/guide/spanish/angular/index.md b/client/src/pages/guide/spanish/angular/index.md
new file mode 100644
index 0000000000..6f1678f10c
--- /dev/null
+++ b/client/src/pages/guide/spanish/angular/index.md
@@ -0,0 +1,59 @@
+---
+title: Angular
+localeTitle: Angular
+---
+## Angular
+
+AngularJS (versiones 1.x) es un Framework de código abierto basado en JavaScript. Es multiplataforma y se utiliza para desarrollar una aplicación web de una sola página (SPWA). AngularJS implementa el patrón MVC para separar los componentes de lógica, presentación y datos. También utiliza la inyección de dependencia para hacer uso de los servicios del lado del servidor en las aplicaciones del lado del cliente.
+
+Angular (versiones 2.x y posteriores) es un marco de código abierto basado en Typescript para desarrollar aplicaciones web front-end. Angular tiene las siguientes funciones como genéricos, escritura estática y también algunas características de ES6.
+
+## Historial de versiones
+
+Google lanzó la versión inicial de AngularJS el 20 de octubre de 2010. El lanzamiento estable de AngularJS fue el 18 de diciembre de 2017 de la versión 1.6.8. El lanzamiento de Angular 2.0 tuvo lugar el 22 de septiembre de 2014 en la conferencia ng-Europe. Una de las características de Angular 2.0 es la carga dinámica.
+
+Después de algunas modificaciones, Angular 4.0 fue lanzado en diciembre de 2016. Angular 4 es compatible con versiones anteriores de Angular 2.0. La biblioteca HttpClient es una de las características de Angular 4.0. El lanzamiento de Angular 5 se realizó el 1 de noviembre de 2017. El soporte para aplicaciones web progresivas fue una de las mejoras en Angular 4.0. El lanzamiento de Angular 6 fue en mayo de 2018. La última versión estable es [6.1.9](https://blog.angular.io/angular-v6-1-now-available-typescript-2-9-scroll-positioning-and-more-9f1c03007bb6)
+
+**Instalar** :
+
+Podemos agregar Angular haciendo referencia a las fuentes disponibles o descargando el marco.
+
+**Enlace a la fuente** :
+
+AngularJS: Podemos agregar AngularJS (versiones Angular 1.x) haciendo referencia a la red de entrega de contenido de Google.
+
+```html
+
+
+```
+
+Descargar / instalar: podemos descargar el framework con npm, Bower o compositor
+
+**Angular 1.x** :
+
+npm
+
+\`\` \`shell npm instalar angular
+```
+Then add a `
+
+
+
+
+
+ 
` es un código HTML5 legal.
+
+¿Debería por lo tanto llenar las etiquetas alt para todas las imágenes? Depende de la imagen, de verdad. Para las imágenes de fondo, la respuesta suele ser no, pero de todos modos debería usar CSS.
+
+Para imágenes puramente decorativas que no tienen información en absoluto, básicamente tiene la libertad de elegir. O bien poner algo útil y descriptivo o nada en absoluto.
+
+Para las imágenes que contienen información, como un folleto, un mapa, un gráfico, etc., no agregue saltos de texto alternativos WCAG a menos que proporcione una alternativa textual. Este suele ser un atributo alternativo, pero también puede ser un bloque de texto justo debajo o al lado de la imagen.
+
+Para imágenes de texto, el texto se puede incluir en el atributo alt o se puede ofrecer de alguna manera alternativa. El problema es que agregar la alternativa textual en la misma página básicamente haría que el mismo contenido se muestre dos veces para las personas que pueden ver la imagen, por lo que el atributo alt es mejor en este caso.
+
+El texto debe proporcionar el contexto y la información que es una alternativa para ver la imagen. Simplemente no es suficiente escribir "imagen de globos aerostáticos": ¿por qué hay imágenes de globos allí? Si la imagen está estilizada o transmite un significado emocional, esto puede incluirse.
+
+### No puedo leer tu garabato hijo
+
+Incluso las personas que no usan gafas y no tienen ningún problema con la vista se benefician de una fuente fácil de leer y un contraste adecuado. Estoy seguro de que te estremecerías si tuvieras que rellenar un formulario en el que las letras de color amarillo claro y sin remedio se colocan sobre un fondo blanco. Para las personas cuya vista no es tan buena, como su abuela, por ejemplo, esto se vuelve irremediablemente peor.
+
+La WCAG tiene relaciones de contraste para letras más pequeñas y más grandes y hay muchas herramientas para verificar si las relaciones de contraste son lo suficientemente fuertes. La información y las herramientas están ahí, ve y úsala.
+
+Un buen lugar para comenzar a verificar el contraste de color es mediante el uso del [verificador de](https://webaim.org/resources/contrastchecker/) contraste de color [WebAIM](https://webaim.org/resources/contrastchecker/) .
+
+### Qué hace este botón?
+
+Mientras estamos en el tema de los formularios, echemos un vistazo rápido a la etiqueta de `input` . Este pequeño es algo importante.
+
+Cuando coloca algunos campos de entrada en una página web, puede usar etiquetas para ... bueno ... etiquetarlos. Sin embargo, ponerlos uno al lado del otro no es suficiente. El atributo que desea es el atributo for, que toma el ID de un campo de entrada posterior. De esta manera, las tecnologías de asistencia saben qué etiqueta asociar con qué campo de formulario.
+
+Supongo que la mejor manera de ilustrar esto es dando un ejemplo:
+
+```html
+
+