Preguntas comunes en entrevistas para Angular 🅰 Primera parte
¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la primera parte.
29.01.2023 a las 20:53
Si quieres ver la primera parte de las preguntas típicas en entrevistas Angular puedes verlas en el siguiente artículo 👇
Preguntas comunes en entrevistas para Angular 🅰 Primera parte
¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la primera parte.
Para añadir estilo a una aplicación de Angular sigue estos pasos:
Importa el archivo CSS en el archivo "angular.json" de tu aplicación. Para ello, busca la sección "styles" y añade la ruta del archivo CSS que acabas de crear. Por ejemplo:
"styles": [ "src/styles.css" ]
Con esto, ya estarías añadiendo estilo a tu aplicación de Angular en general.
Si necesitas añadir estilos a un componente en particular, puedes seguir los mismos pasos que se mencionaron anteriormente, pero en lugar de importar el archivo CSS en "angular.json", lo importarás en el archivo TypeScript del componente y lo cargarás mediante la propiedad "styleUrls" del decorador del componente.
@Component({ selector: 'mi-componente', templateUrl: './mi-componente.component.html', styleUrls: ['./mi-componente.component.css'] })
El ciclo de vida de un componente de Angular consta de varios estados y etapas a lo largo de su existencia, desde su creación hasta su destrucción.
Las etapas del ciclo de vida de un componente Angular son:
Creación (constructor): esta etapa comienza cuando se instancia el componente, ya sea mediante interacción del usuario (por ejemplo, al hacer clic en un botón) o de forma programática (por ejemplo, utilizando la palabra clave new).
ngDoCheck: Angular realiza la detección de cambios para verificar si hay algún cambio en los datos del componente y actualizar la vista en consecuencia. Este es un proceso continuo que se mantiene durante todo el ciclo de vida del componente.
Directiva estructural en Angular 🅰
Te explico qué es una directiva estructural en Angular y creamos una.
Uso de pipes en Angular
En este artículo te explicaré qué es y cómo usar los pipes de Angular
En Angular, se pueden compartir datos entre componentes de varias maneras.
Una de ellas es utilizar un servicio para compartir datos entre componentes, ya que los servicios son singletons y pueden ser injectados en diferentes componentes.
También se puede utilizar un módulo de almacenamiento común como ngrx para compartir el estado de la aplicación entre componentes.
Pero lo más común es utilizar la propiedad Input para compartir datos de padres a hijos y utilizar la propiedad Output para compartir datos de hijos a padres.
En el componente hijo, se define una propiedad Input, la cuál recibirá del padre los datos.
//TS import { Input } from '@angular/core'; export class HijoComponent { //en esta propiedad Input es en donde se recibirá los datos del padre @Input() datosParaElHijo; }
Crearemos una propiedad en el padre llamada datosParaElHijo que enviaremos desde el padre al hijo
//TS export class PadreComponent { datosParaElHijo = { nombre: 'Juan', edad: 30 }; } //HTML <hijo [datosParaElHijo]="datosParaElHijo"></hijo>
En el componente hijo, se define una propiedad Output con un tipo de evento personalizado y una función que se va a ejecutar cuando se produzca el evento:
import { Output, EventEmitter } from '@angular/core'; export class HijoComponent { @Output() datosParaElPadre = new EventEmitter<{ nombre: string, edad: number }>(); enviarDatosAlPadre() { this.datosParaElPadre.emit({ nombre: 'Juan', edad: 30 }); } }
En el componente padre, se define una función que se va a ejecutar cuando se reciban los datos del componente hijo:
export class PadreComponent { recibirDatosDelHijo(datos) { console.log(datos); // { nombre: 'Juan', edad: 30 } } }
Después, en la plantilla (HTML) del componente padre, se usa el componente hijo y se le asigna la función recibirDatosDelHijo como manejador del evento datosParaElPadre:
<hijo (datosParaElPadre)="recibirDatosDelHijo($event)"></hijo>
De esta manera, cuando se ejecute la función enviarDatosAlPadre en el componente hijo, se emitirá el evento datosParaElPadre y se ejecutará la función recibirDatosDelHijo en el componente padre, recibiendo los datos enviados por el hijo.
Espera por la tercera entrega de preguntas para entrevistas Angular 😉
Hasta luego 🖖
Software
IoT
Digitalización
Aplicaciones móviles
Consultoría