Preguntas comunes en entrevistas Angular 🅰 Segunda parte

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.

¿Cómo añadir hojas de estilos a una aplicación de Angular?

Para añadir estilo a una aplicación de Angular sigue estos pasos:

1. Crea un archivo CSS en la carpeta principal de tu aplicación de Angular. Por ejemplo, puedes crear un archivo llamado "styles.css" en la carpeta raíz de tu proyecto.

2. 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" ]

3. Añade tus reglas de estilo al archivo CSS que acabas de importar. Estas reglas se aplicarán a toda la aplicación de Angular.

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']
  })
  
      

¿Cuál es el ciclo de vida de un componente Angular?

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).

• ngOnChanges: en esta etapa se establecen las entradas y salidas del componente y se inicializan las propiedades enlazadas a datos.
• ngOnInit: en esta etapa se enlazan las plantillas y estilos del componente y se renderiza su vista.

• 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.

• ngOnDestroy: esta etapa comienza cuando el componente ya no es necesario, ya sea porque el usuario ha navegado fuera de la página o el componente ha sido eliminado del DOM. En esta etapa se llama al método ngOnDestroy del componente, lo que permite que el componente libere los datos y eventos restantes.

¿Qué es una directiva en Angular?

Directiva estructural en Angular 🅰

Te explico qué es una directiva estructural en Angular y creamos una.

¿Qué es un pipe en Angular?¿Cómo se crean pipes personalizados?

¿Qué son los pipes de Angular?

En este artículo te explicaré qué es y cómo usar los pipes de Angular

¿Cómo se comparten datos entre componentes en 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.

¿De padre a hijo?

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>
  
      

¿De hijo a padre?

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.

Actualización 26.03.2023 👇

Preguntas comunes en entrevistas Angular 🅰 Tercera parte

¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la tercera parte.

Preguntas comunes en entrevistas Angular 🅰 Cuarta parte

¿Quieres prepararte una entrevista para desarrollador frontend Angular? Aquí la cuarta parte.

Hasta luego 🖖