Ejercicio con componentes, data binding y encapsulation

portada coding challenge componentes

Índice ¿De qué va esto?InstruccionesPaso 1: Inicio y creación de los componentes de nuestra appPaso 2: Creación y ubicación de los botonesPaso 3: Creación y emisión de un custom eventPaso 4: Escuchando nuestro evento desde fuera de su componentePaso 5: Pausando el juegoPaso 6: Mostrar un componente u otro (EvenComponent o OddComponent) según la naturaleza del … Leer másEjercicio con componentes, data binding y encapsulation

Uso avanzado de los componentes en Angular | Parte #3

portada componentes uso avanzado

Índice Ciclo de vida de un componente (aka component lifecycle)Lifecycle hooks en acciónngOnInitngOnChangesngDoCheck​AfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewCheckedngOnDestroyAccediendo a la template de un componente en distintas fases de su ciclo de vidaAccediendo al contenido proyectado mediante ngContent a través de @ContentChildMás recursos de aprendizaje Retomamos esta saga sobre el uso avanzado de componentes en Angular. Aquí tienes las partes #1 y #2 si te las … Leer másUso avanzado de los componentes en Angular | Parte #3

Uso avanzado de los componentes en Angular | Parte #1

portada componentes uso avanzado

Índice Estado inicial de nuestra demoDividiendo el código en componentesPasando información del parent component al child component mediante property binding y el decorador @Input()Asignando un alias a una propiedadPasando información del child component al parent component mediante la emisión de nuestros propios eventos y el decorador @Output()Asignando un alias a custom eventsConclusión de esta primera parte Los componentes son el núcleo duro de Angular, elementos re-utilizables a lo … Leer másUso avanzado de los componentes en Angular | Parte #1

Cómo gestionar errores de código en un proyecto de Angular

portada debugging en angular

Índice Herramienta #1: Consola (developer tools) de chromeError típico nº1Herramienta #2: SourcemapsHerramienta #3: Augury Herramienta #1: Consola (developer tools) de chromeAngular, a través de la consola de las dev tools de Chrome, se encarga de mandarnos mensajes de alerta cada vez que existe algún tipo de error en nuestro código. Entender estos mensajes es vital para poder … Leer másCómo gestionar errores de código en un proyecto de Angular

Directives en Angular: guía práctica

angular directives portada

Índice ¿Qué son las directives?Ejemplo para nuestra demo*ngIf directiveAñadiendo un else al *ngIfngStyle directivengClass directive*ngFor directiveEjerciciosMás recursos de aprendizaje ¿Qué son las directives?Las directives, junto con los componentes, son una pieza clave para poder construir aplicaciones con Angular.  Son, esencialmente, instrucciones para manipular el DOM. De hecho, los componentes encajan dentro de esta descripción, ya que cuando usamos el … Leer másDirectives en Angular: guía práctica

Guía práctica del databinding en Angular

data binding poster

Índice ¿Qué es el databinding?Ejemplo para nuestra demoTipos de databindingString interpolationProperty binding¿Cómo saber cuándo usar string interpolation y cuándo property binding?Event bindingUso de la palabra clave $eventTwo way data bindingEjerciciosMi solución ¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (aka hardcoded). Podríamos traducir el databinding como «comunicación» entre nuestro código HTML (archivo … Leer másGuía práctica del databinding en Angular

Cómo solucionar problemas comunes del Angular CLI

angular cli tips and tricks

Índice ProblemaSolución paso por paso Problema¿Te ha pasado alguna vez que, al intentar escribir un comando del Angular CLI, a sabiendas de que lo tienes instalado, te ha dado este error? C:\Users\User\workspace\my-first-app (master -> origin) λ ng version ‘ng’ is not recognized as an internal or external command, operable program or batch file. A mí … Leer másCómo solucionar problemas comunes del Angular CLI

Entendiendo los componentes en Angular

componentes en angular

Índice IntroCreación de nuestro primer componenteEntendiendo el papel del AppModuleUsando nuestro componenteCreación automática de componentesAnidando componentesAñadiendo CSS a un componente con el apoyo de BootstrapDiferentes formas de usar el selectorMás recursos de aprendizaje NOTA: IDIOMAS, QUERIDA.Es posible que alguna vez traduzca algún término de programación, pero lo normal es que no lo haga, porque considero … Leer másEntendiendo los componentes en Angular

Angular: Entendiendo la ngModel Directive

ngModel

Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas en las que podemos conseguir esto es utilizando la directiva ngModel. Para este ejemplo vamos a trabajar directamente en nuestro AppComponent.1. Borramos todo el contenido del archivo app.component.html y añadimos un sencillo input y un párrafo, al que le pasamos … Leer másAngular: Entendiendo la ngModel Directive

Construye Minioland: Tu primera aplicación con Angular | Parte #3

construye minioland

Índice Tuneando los parámetros del MinionComponent para mostrar una página individual por cada minionDando forma al template del MinionComponentCreando un buscador de minionsCreando la pantalla de nuestros resultados de búsquedaConfigurando la parte visual del BrowserComponentAplicando el DRY principle usando la lógica del componente padre y el componente hijoAplicación de nuestro nuevo componente MinionCardComponent a otros componentesUtilizando @Output para comunicarnos entre el child … Leer másConstruye Minioland: Tu primera aplicación con Angular | Parte #3

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar