Preguntas comunes en entrevistas Angular 🅰 Cuarta parte

Te dejo las entregas anteriores en los siguientes enlaces 👇

Preguntas comunes en entrevistas para Angular 🅰 Primera parte

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

Preguntas comunes en entrevistas Angular 🅰 Segunda parte

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

Preguntas comunes en entrevistas Angular 🅰 Tercera parte

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

¿Qué es un servicio en Angular?

En Angular, un servicio es una clase que proporciona una funcionalidad específica a través de toda la aplicación.

Los servicios se utilizan para compartir datos, realizar solicitudes HTTP, almacenar el estado de la aplicación, autenticar usuarios y realizar otras operaciones que deben estar disponibles para múltiples componentes de la aplicación.

Los servicios se pueden inyectar en componentes, directivas y otros servicios para proporcionar funcionalidad en toda la aplicación.

Esto permite que los componentes de la aplicación sean más modulares y reutilizables, ya que pueden depender de los servicios en lugar de implementar la lógica de la aplicación directamente.

En Angular, los servicios se crean con la sintaxis de clase regular y se decoran con el decorador @Injectable.

Los servicios también pueden depender de otros servicios mediante la inyección de dependencias, lo que permite crear jerarquías complejas de servicios que proporcionan diferentes funcionalidades en diferentes partes de la aplicación.

Resumiendo, los servicios en Angular son una forma de compartir funcionalidad en toda la aplicación, lo que mejora la modularidad, reutilización y mantenibilidad del código de la aplicación.

¿Qué es una vista encapsulada en Angular?

En Angular, una vista encapsulada es una característica que permite que los estilos CSS de un componente se apliquen solo a ese componente y no a otros componentes de la aplicación.

Esto se logra utilizando el concepto de encapsulación de estilo, que significa que los estilos definidos en un componente solo se aplican a los elementos HTML dentro de ese componente y no se propagan a los elementos HTML de otros componentes.

Esto ayuda a evitar que los estilos definidos en un componente afecten accidentalmente a otros componentes, lo que puede hacer que la aplicación sea más difícil de mantener y depurar.

La vista encapsulada se implementa mediante la generación de identificadores únicos para los selectores CSS definidos en el componente.

Esto se hace utilizando un mecanismo llamado Emulated Encapsulation (Encapsulación Emulada) que consiste en agregar un prefijo único a los selectores CSS del componente, creando así reglas CSS únicas para ese componente.

La encapsulación de la vista en Angular es un mecanismo muy útil que ayuda a mantener la modularidad y la reutilización del código, permitiendo que los desarrolladores creen componentes con estilos personalizados sin afectar la apariencia de otros componentes en la aplicación.

Por ejemplo, supongamos que tenemos un componente llamado MiComponente con un estilo personalizado que queremos aplicar solo a los elementos dentro de ese componente. Aquí está cómo se vería el código de este componente:

import { Component } from '@angular/core';

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent {
  // ...lógica del componente aquí...
}

  

En este ejemplo, hemos definido un selector para el componente (selector: 'app-mi-componente') y hemos especificado la ubicación del archivo HTML y CSS del componente (templateUrl: './mi-componente.component.html' y styleUrls: ['./mi-componente.component.css']).

Ahora, para encapsular la vista, Angular automáticamente generará identificadores únicos para los selectores CSS definidos en el archivo mi-componente.component.css. Por ejemplo, si tuviéramos la siguiente regla CSS:

  .mensaje {
    font-size: 14px;
    color: blue;
  }
  
  

Angular la transformaría en:

  .app-mi-componente .mensaje {
    font-size: 14px;
    color: blue;
  }
  
  

De esta manera, los estilos solo se aplicarán a los elementos HTML que están dentro del componente MiComponente.

Los selectores CSS en la aplicación que no están dentro del componente no se verán afectados por esta regla.

¿Qué es una Single Page Aplication?

Las Single Page Applications son aplicaciones web altamente interactivas y eficientes que brindan una experiencia de usuario suave y rápida mediante la actualización dinámica del contenido en una única página web, en lugar de cargar múltiples páginas desde el servidor.

Entrando un poco más en detalle, una Single Page Application (SPA) es una aplicación web que se carga y se ejecuta completamente en una sola página web, sin tener que cargar varias páginas o realizar una recarga completa de la página para navegar entre diferentes secciones o funcionalidades de la aplicación.

En una SPA, la página se carga solo una vez y se utiliza JavaScript para dinámicamente actualizar el contenido de la página mientras el usuario interactúa con la aplicación, sin tener que realizar solicitudes adicionales al servidor.

Esto proporciona una experiencia de usuario más rápida y fluida, ya que las transiciones son más rápidas y los datos se actualizan en tiempo real sin interrupciones.

Las SPA utilizan una arquitectura de cliente-servidor en la que la mayor parte del procesamiento de la aplicación se realiza en el lado del cliente, utilizando frameworks como Angular, React o Vue.js.

El servidor proporciona solo los datos y recursos necesarios, y no tiene que generar la página completa cada vez que se realiza una solicitud.

Además, las SPA pueden aprovechar las capacidades de almacenamiento en caché del navegador y las tecnologías de enrutamiento de JavaScript para administrar el estado de la aplicación y la navegación del usuario sin tener que cargar nuevas páginas.

¿Cómo enviar headers con el HttpClient de Angular?

Para enviar headers con el HttpClient de Angular, podemos utilizar el método set() del objeto HttpHeaders.

Este método nos permite agregar o actualizar un encabezado HTTP en particular.

Por ejemplo, imagina que queremos enviar un encabezado de autorización con un token de acceso en una solicitud HTTP:

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

// Creamos un objeto HttpHeaders con nuestro token de acceso
const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': 'Bearer ' + tokenAcceso
  })
};

// Hacemos una solicitud HTTP con los headers personalizados
this.http.get('https://ejemplo.com/api/datos', httpOptions).subscribe(
  (response) => {
    console.log(response);
  },
  (error) => {
    console.log(error);
  }
);

  

Como puedes ver, hemos creado un objeto httpOptions con un encabezado de autorización que incluye nuestro token de acceso.

Luego, hemos pasado este objeto como segundo parámetro en nuestro método get() para incluir el encabezado personalizado en la solicitud HTTP.

Este mismo enfoque se puede aplicar para enviar cualquier tipo de encabezado personalizado en una solicitud HTTP con HttpClient.

Solo necesitamos crear un objeto HttpHeaders con nuestros encabezados personalizados y pasarlo como parte de las opciones de solicitud.

¿Qué es el ng-container y el ng-template?¿Cuándo usar cada uno?

🟣 ¿Qué es el ng-container?

ng-container es una directiva estructural en Angular que no crea un elemento HTML en la página, pero permite agrupar elementos HTML relacionados y aplicarles directivas y/o condiciones.

La directiva ng-container se utiliza a menudo en situaciones donde necesitamos utilizar una directiva estructural (por ejemplo, *ngIf, *ngFor, etc.) en un grupo de elementos HTML sin agregar un elemento adicional a la página.

Un ejemplo de cómo se puede utilizar ng-container con la directiva *ngIf para mostrar u ocultar un conjunto de elementos HTML es el siguiente:

<div *ngIf="mostrarElementos">
  <p>Elemento 1</p>
  <p>Elemento 2</p>
  <p>Elemento 3</p>
</div>

  

Aquí, hemos utilizado la directiva *ngIf para mostrar u ocultar el conjunto de elementos HTML dependiendo del valor de la variable mostrarElementos.

Sin embargo, si quisiéramos aplicar *ngIf a un grupo de elementos sin tener que envolverlos en un elemento adicional, podemos utilizar ng-container de la siguiente manera:

<ng-container *ngIf="mostrarElementos">
  <p>Elemento 1</p>
  <p>Elemento 2</p>
  <p>Elemento 3</p>
</ng-container>


  

En este ejemplo, hemos utilizado ng-container como contenedor sin agregar elementos adicionales a la página, lo que permite que *ngIf se aplique directamente a los elementos anidados.

Esto puede ser útil en situaciones donde agregar un elemento adicional no es deseable o práctico.

🟣 ¿Qué es el ng-template?

ng-template es una directiva estructural en Angular que se utiliza para definir plantillas de renderizado que no se muestran directamente en la página, pero que se pueden utilizar para renderizar contenido dinámicamente.

Una plantilla es un fragmento de código HTML que se utiliza para definir cómo se debe renderizar un componente o una sección de la página.

ng-template nos permite definir plantillas reutilizables y dinámicas que se pueden utilizar para renderizar contenido basado en datos, condiciones o eventos.

ng-template se utiliza a menudo con las directivas estructurales *ngFor, *ngIf y *ngSwitchCase, pero también se puede utilizar en cualquier situación donde necesitemos definir una plantilla para su uso posterior.

Te muestro un ejemplo de cómo se puede utilizar ng-template con la directiva *ngFor para renderizar una lista de elementos:

  <ul>
  <ng-template ngFor let-item [ngForOf]="items">
    <li>{{ item }}</li>
  </ng-template>
</ul>

  

Si te fijas, hemos utilizado ng-template junto con *ngFor para definir una plantilla para cada elemento de una lista de items.

La directiva ngFor se encarga de renderizar la plantilla para cada elemento en items.

También podemos asignar un nombre a la plantilla utilizando la directiva ng-template y luego hacer referencia a ella en otro lugar de la página utilizando la directiva ngTemplateOutlet.

Te dejo un ejemplo:

<ng-template #miPlantilla>
  <p>Contenido de la plantilla</p>
</ng-template>

<div>
  <h2>Título</h2>
  <ng-container *ngTemplateOutlet="miPlantilla"></ng-container>
</div>

  

Hemos definido una plantilla con el nombre miPlantilla y la hemos referenciado en otro lugar de la página utilizando la directiva ngTemplateOutlet.

El contenido de la plantilla se renderiza dentro del contenedor ng-container cuando se utiliza la directiva ngTemplateOutlet.

🟣 ¿Cuándo usar el ng-container y cuándo usar el ng-template?

Creo que con lo explicado anteriormente podrías fácilmente responder a esta pregunta, no obstante te la desarrollo.

En general, ng-container y ng-template son herramientas útiles para crear plantillas dinámicas y estructuras complejas de elementos en Angular, y la elección entre ellas depende de la situación específica en la que se utilizan.

ng-container y ng-template son directivas diferentes en Angular.

ng-container se utiliza para agrupar elementos sin introducir un nuevo elemento en el DOM.

Esto puede ser útil cuando se utiliza con directivas estructurales como *ngIf, *ngFor y *ngSwitchCase, donde queremos aplicar la directiva a un conjunto de elementos, pero no queremos que esos elementos se representen como un elemento adicional en el DOM.

Por otro lado, ng-template se utiliza para definir plantillas que no se representan directamente en el DOM, sino que se utilizan para renderizar contenido dinámicamente.

ng-template se puede utilizar con las mismas directivas estructurales que ng-container, pero en lugar de agrupar elementos, se define una plantilla que se puede utilizar en múltiples lugares.

Entonces, ¿cómo saber cuándo utilizar ng-container o ng-template?

En general, si estamos agrupando elementos y no necesitamos una plantilla reutilizable, podemos utilizar ng-container.

Si necesitamos definir una plantilla reutilizable, podemos utilizar ng-template.

Sin embargo, hay algunas situaciones en las que las dos directivas pueden utilizarse de manera intercambiable.

Por ejemplo, si estamos utilizando *ngIf para mostrar o ocultar un elemento, podríamos utilizar ng-container para agrupar ese elemento con otros elementos que se muestran todo el tiempo.

Pero también podríamos utilizar ng-template para definir una plantilla reutilizable que se utiliza para renderizar ese elemento cuando se cumple la condición *ngIf.

Hasta aquí el artículo de hoy, espera por la quinta y última entrega de preguntas comunes en entrevistas para Angular 🅰

Hasta luego 🖖