Angular: todas las preguntas en una página

Angular es un marco de aplicación web de código abierto basado en TypeScript desarrollado por Google. Se utiliza para crear aplicaciones de una sola página (SPA) con una arquitectura basada en componentes.

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un componente es un componente fundamental de las aplicaciones Angular. Consiste en una plantilla HTML, una hoja de estilo CSS y una clase TypeScript que define el comportamiento y los datos del componente.

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



@Component({

    selector: 'app-example',

    template: '<h1>Hello, Angular!</h1>',

    styles: ['h1 { color: blue; }']

})

export class ExampleComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un servicio en Angular es una clase que proporciona una funcionalidad específica que se puede compartir entre componentes. Los servicios se utilizan para manejar operaciones de datos y lógica empresarial.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Service Data';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular CLI (Command Line Interface) es una herramienta que se utiliza para automatizar el flujo de trabajo de las aplicaciones Angular. Ayuda a crear nuevos proyectos, generar componentes y ejecutar servidores de desarrollo.

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Para crear un nuevo componente Angular usando Angular CLI, puede ejecutar el comando:

ng generate component component-name

o

ng g c component-name

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace de datos es el mecanismo para sincronizar datos entre el modelo y la vista. Angular admite varios tipos de enlace de datos: interpolación, enlace de propiedad, enlace de eventos y enlace de datos bidireccional.

<input [(ngModel)]="name" />

<p>Hello, {{ name }}!</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las directivas son clases que agregan comportamiento a elementos en sus aplicaciones Angular. Se utilizan para manipular el DOM o agregar nuevos comportamientos a los elementos.

import { Directive, ElementRef, Renderer2 } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(el: ElementRef, renderer: Renderer2) {

        renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular Router se utiliza para navegar entre diferentes vistas o páginas en una aplicación de una sola página. Permite configuraciones de enrutamiento y parámetros de ruta.

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas se definen en la configuración `RouterModule`. Cada ruta asigna una ruta a un componente.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos angulares son clases que agrupan componentes, servicios, directivas y canalizaciones relacionados. Ayudan a organizar y gestionar la estructura de la aplicación.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La inyección de dependencia es un patrón de diseño utilizado para implementar IoC (Inversión de Control). En Angular, le permite inyectar servicios y otras dependencias en componentes y servicios.

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngModel` se utiliza para el enlace de datos bidireccional. Vincula un elemento de entrada de formulario a una propiedad del componente.

<input [(ngModel)]="name" />

<p>Welcome, {{ name }}!</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Una tubería angular es una forma de transformar datos en la plantilla. Las canalizaciones se utilizan para formatear o transformar datos antes de mostrárselos al usuario.

<p>{{ birthday | date:'longDate' }}</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular admite formularios reactivos y basados en plantillas. Los formularios basados ​​en plantillas usan directivas en la plantilla, mientras que los formularios reactivos usan las clases FormControl y FormGroup.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: `

    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">

        <input formControlName="name" />

        <button type="submit">Submit</button>

    </form>

    `

})

export class FormComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            name: ['']

        });

    }



    onSubmit() {

        console.log(this.formGroup.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngIf` es una directiva estructural utilizada para incluir o excluir condicionalmente elementos del DOM basándose en una expresión booleana.

<div *ngIf="isVisible">Content to show when isVisible is true</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede pasar datos de un componente principal a un componente secundario utilizando las propiedades @Input.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>'

})

export class ChildComponent {

    @Input() data: string;

}



@Component({

    selector: 'app-parent',

    template: '<app-child [data]="parentData"></app-child>'

})

export class ParentComponent {

    parentData = 'Hello from parent!';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngFor` es una directiva estructural que se utiliza para iterar sobre una lista o matriz y representar una plantilla para cada elemento.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`AppModule` es el módulo raíz de una aplicación Angular. Es responsable de arrancar la aplicación y declarar los componentes, directivas y servicios que pertenecen al módulo.

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas se definen utilizando `RouterModule` con una variedad de configuraciones de ruta que asignan rutas URL a componentes.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los ganchos del ciclo de vida son métodos que le permiten aprovechar momentos clave en el ciclo de vida de un componente o directiva, como la inicialización y la destrucción.

import { Component, OnInit, OnDestroy } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent implements OnInit, OnDestroy {

    ngOnInit() {

        console.log('Component initialized');

    }



    ngOnDestroy() {

        console.log('Component destroyed');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngClass` se utiliza para agregar o eliminar dinámicamente clases CSS a elementos en función de la evaluación de expresiones.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Content</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngSwitch` se usa para mostrar condicionalmente uno de muchos elementos según el valor de una expresión.

<div [ngSwitch]="currentColor">

    <div *ngSwitchCase="'red'">Red</div>

    <div *ngSwitchCase="'blue'">Blue</div>

    <div *ngSwitchDefault>Default</div>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngForTrackBy` ayuda a Angular a rastrear qué elementos han cambiado, se han agregado o se han eliminado proporcionando un identificador único para cada elemento de la lista.

<div *ngFor="let item de items; trackBy: trackById">

    {{ item.name }}

</div>



trackById(index: number, item: any): number {

    return item.id;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngIf` se puede usar con `else` para proporcionar una plantilla alternativa cuando la condición es falsa.

<div *ngIf="isVisible; else notVisible">

    Content to show when isVisible is true

</div>

<ng-template #notVisible>

    Content to show when isVisible is false

</ng-template>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormBuilder` es un servicio utilizado para crear y administrar formularios reactivos en Angular. Simplifica la creación de instancias `FormGroup` y `FormControl`.

import { FormBuilder, FormGroup } from '@angular/forms';



constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

        name: [''],

        email: ['']

    });

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para marcar una clase como disponible para la inyección de dependencia. Le dice a Angular que la clase se puede inyectar en otras clases como una dependencia.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@Input` se usa para pasar datos de un componente principal a un componente secundario, mientras que `@Output` se usa para emitir eventos desde el componente secundario al principal.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: '<button (click)="sendEvent()">Click me</button>'

})

export class ChildComponent {

    @Input() data: string;

    @Output() event = new EventEmitter<string>();



    sendEvent() {

        this.event.emit('Event data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`AppComponent` suele ser el componente raíz de una aplicación Angular. Sirve como punto de entrada principal para la aplicación y activa otros componentes.

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



@Component({

    selector: 'app-root',

    template: '<h1>Welcome to Angular!</h1>',

    styles: ['h1 { color: red; }']

})

export class AppComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede manejar la entrada del usuario mediante formularios basados en plantillas o formularios reactivos. Los formularios basados ​​en plantillas usan directivas en la plantilla, mientras que los formularios reactivos usan controles y grupos de formulario en la clase de componente.

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

import { FormGroup, FormBuilder } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: `

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

        <input formControlName="name" />

        <button type="submit">Submit</button>

    </form>

    `

})

export class FormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['']

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` define un módulo Angular, incluidos los componentes, directivas y canalizaciones que contiene, así como otros módulos de los que depende.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`HttpClient` se utiliza para realizar solicitudes HTTP a un servidor. Proporciona métodos como "get", "post", "put" y "delete" para manejar operaciones HTTP.

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

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    constructor(private http: HttpClient) {}



    getData() {

        return this.http.get('https://api.example.com/data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`RouterModule` es un módulo Angular que proporciona funcionalidad de enrutamiento y navegación para aplicaciones Angular. Ayuda a definir rutas y configurar la navegación.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los decoradores son funciones que agregan metadatos a clases, métodos o propiedades. Angular usa decoradores para definir componentes, directivas, módulos y servicios.

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



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para acceder a un componente secundario, directiva o elemento DOM de la clase del componente principal.

import { Component, ViewChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<input #inputElement />'

})

export class ExampleComponent {

    @ViewChild('inputElement') input: ElementRef;



    ngAfterViewInit() {

        this.input.nativeElement.focus();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se crea una directiva personalizada utilizando el decorador `@Directive`. Se puede utilizar para agregar comportamiento a elementos o componentes.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {}



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'white');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ChangeDetectionStrategy` determina cómo Angular busca cambios en el componente. Las dos estrategias son "Default" y "OnPush".

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



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>',

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class ExampleComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngModel` se utiliza para el enlace de datos bidireccional entre el modelo y la vista. Vincula un control de formulario a una propiedad en la clase de componente.

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



@Component({

    selector: 'app-example',

    template: '<input [(ngModel)]="name" /> <p>Hello {{ name }}</p>'

})

export class ExampleComponent {

    name: string = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` vincula una propiedad o atributo del elemento host de una directiva o componente a una propiedad de la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlight') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ng-content` se utiliza para proyectar contenido en un componente desde su componente principal. Le permite crear componentes reutilizables con contenido personalizable.

@Component({

    selector: 'app-card',

    template: '<ng-content></ng-content>'

})

export class CardComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede utilizar el servicio `Router` para navegar a diferentes rutas mediante programación llamando a su método `navigate`.

import { Router } from '@angular/router';



constructor(private router: Router) {}



navigateToHome() {

    this.router.navigate(['/home']);

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se llama después de que se hayan inicializado las propiedades vinculadas a datos del componente. Se usa comúnmente para la lógica de inicialización.

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



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un servicio Angular se define utilizando el decorador `@Injectable`. Es una clase que se puede inyectar en otros componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return ['data1', 'data2'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Directive` se utiliza para crear directivas personalizadas en Angular. Las directivas pueden cambiar la apariencia o el comportamiento de elementos en el DOM.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {}



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se crea un módulo Angular utilizando el decorador `@NgModule`. Define un módulo que agrupa componentes, directivas, canalizaciones y servicios.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngIf` es una directiva estructural que incluye o elimina condicionalmente un elemento del DOM en función de la veracidad de una expresión.

<div *ngIf="isVisible">This is visible</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngFor` es una directiva estructural que se utiliza para repetir un bloque de HTML para cada elemento de una lista.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Component` se utiliza para definir un componente en Angular. Especifica el selector, la plantilla y los estilos del componente.

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



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>',

    styles: ['p { color: blue; }']

})

export class ExampleComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La inyección de dependencia en Angular se implementa proporcionando servicios en la matriz de "proveedores" del componente o módulo e inyectándolos en el constructor de la clase.

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

import { DataService } from './data.service';



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent {

    constructor(private dataService: DataService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Pipe` se utiliza para definir canalizaciones personalizadas en Angular, que transforman datos en plantillas.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'customPipe'

})

export class CustomPipe implements PipeTransform {

    transform(value: string): string {

        return value.toUpperCase();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` se llama cuando cambia una propiedad de entrada del componente. Se utiliza para realizar acciones basadas en los cambios de propiedad de entrada.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent implements OnChanges {

    @Input() data: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes detected:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngModel` es una directiva utilizada para el enlace de datos bidireccional entre los controles del formulario y las propiedades del componente.

<input [(ngModel)]="name" />

<p>Hello {{ name }}</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos se crean usando las clases `FormGroup` y `FormControl` de `@angular/forms`.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: `

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

        <input formControlName="name" />

        <button type="submit">Submit</button>

    </form>

    `

})

export class FormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['']

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` se utiliza para escuchar eventos en el elemento host de la directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appEvent]'

})

export class EventDirective {

    @HostListener('click', ['$event']) onClick(event: Event) {

        console.log('Element clicked:', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` se utiliza para pasar datos de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>'

})

export class ChildComponent {

    @Input() data: string;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para emitir eventos de un componente secundario a un componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: '<button (click)="sendData()">Send Data</button>'

})

export class ChildComponent {

    @Output() dataSent = new EventEmitter<string>();



    sendData() {

        this.dataSent.emit('Some data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las solicitudes HTTP en Angular se manejan mediante el servicio `HttpClient` de `@angular/common/http`.

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

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



@Component({

    selector: 'app-http',

    template: '<p>HTTP request component</p>'

})

export class HttpComponent {

    constructor(private http: HttpClient) {}



    getData() {

        this.http.get('https://api.example.com/data').subscribe(response => {

            console.log(response);

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `RouterModule` se utiliza para configurar rutas en una aplicación Angular, permitiendo la navegación entre diferentes vistas o componentes.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para definir un servicio que se puede inyectar en otros componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class UserService {

    getUser() {

        return { name: 'John Doe' };

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La propiedad `imports` en `@NgModule` se usa para importar otros módulos Angular al módulo actual, haciendo que sus componentes, directivas y canalizaciones estén disponibles para su uso.

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

import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';



@NgModule({

    imports: [CommonModule, FormsModule],

    declarations: [MyComponent]

})

export class MyModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` se utiliza para vincular una propiedad o atributo del elemento host a una propiedad de la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appColor]'

})

export class ColorDirective {

    @HostBinding('style.color') color: string = 'blue';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para acceder a un componente secundario, directiva o elemento DOM dentro de la plantilla del componente.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<input #myInput />'

})

export class ExampleComponent implements AfterViewInit {

    @ViewChild('myInput') input: ElementRef;



    ngAfterViewInit() {

        this.input.nativeElement.focus();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas angulares con parámetros se definen usando dos puntos `:` seguidos del nombre del parámetro en la ruta de la ruta.

const routes: Routes = [

    { path: 'user/:id', component: UserComponent }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` se utiliza para incluir o excluir condicionalmente elementos del DOM en función de una expresión de cambio.

<div [ngSwitch]="value">

    <p *ngSwitchCase="'case1'">Case 1</p>

    <p *ngSwitchCase="'case2'">Case 2</p>

    <p *ngSwitchDefault>Default case</p>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` se utiliza para aplicar estilos en línea a elementos según los valores de una expresión.

<div [ngStyle]="{'color': color, 'font-size.px': fontSize}">

    Styled text

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngContainer` es una directiva estructural que le permite agrupar elementos sin agregar elementos adicionales al DOM.

<ng-container *ngIf="isVisible">

    </ng-container><ng-container *ngIf="isVisible"><p>Content is visible</p>

</ng-container>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los guardias de ruta se utilizan para controlar el acceso a las rutas. Implementan las interfaces `CanActivate`, `CanDeactivate`, `CanLoad` o `Resolve`.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

    providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private router: Router) {}



    canActivate(): boolean {

        // Implement authentication check

        return true; // or false if not authenticated

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` se utiliza para vincular una propiedad o atributo del elemento host a una propiedad de la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlight') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La validación de formularios en formularios reactivos se realiza mediante validadores como `Validators.required`, `Validators.minLength`, etc.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: `

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

        <input formControlName="name" />

        <div *ngIf="form.get('name').invalid && form.get('name').touched">

            Name is required

        </div>

        <button type="submit">Submit</button>

    </form>

    `

})

export class FormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La propiedad `declaraciones` en `@NgModule` se usa para declarar los componentes, directivas y canalizaciones que pertenecen al módulo.

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

import { CommonModule } from '@angular/common';

import { MyComponent } from './my.component';



@NgModule({

    declarations: [MyComponent],

    imports: [CommonModule],

    exports: [MyComponent]

})

export class MyModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional vinculando controles de formulario a las propiedades del componente.

<input [(ngModel)]="name" />

<p>Hello {{ name }}</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para marcar una clase como disponible para ser proporcionada e inyectada como una dependencia en otros componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class MyService {

    getData() {

        return 'Service data';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los errores HTTP se pueden manejar usando el operador `catchError` de `rxjs` para detectar y manejar errores de solicitudes HTTP.

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

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

import { catchError } from 'rxjs/operators';

import { de } from 'rxjs';



@Injectable({

    providedIn: 'root'

})

export class DataService {

    constructor(private http: HttpClient) {}



    getData() {

        return this.http.get('https://api.example.com/data').pipe(

            catchError(error => {

                console.error('Error occurred', error);

                return of([]);

            })

        );

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La propiedad `proveedores` en `@NgModule` se usa para definir los servicios que estarán disponibles para la inyección de dependencia dentro del módulo.

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

import { MyService } from './my.service';



@NgModule({

    providers: [MyService]

})

export class MyModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `*ngFor` se utiliza para iterar sobre una lista y crear una plantilla para cada elemento de la lista.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se utiliza para incluir o excluir condicionalmente elementos del DOM en función de una expresión.

<div *ngIf="isVisible">

    Content is visible

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` se utiliza para pasar datos de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>'

})

export class ChildComponent {

    @Input() data: string;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `AppComponent` es el componente raíz de la aplicación Angular y sirve como punto de entrada para el árbol de componentes.

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



@Component({

    selector: 'app-root',

    template: '<h1>Welcome to Angular!</h1>'

})

export class AppComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las directivas personalizadas se crean utilizando el decorador `@Directive` para definir una clase que se aplicará a los elementos.

import { Directive, ElementRef, Renderer2 } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace del ciclo de vida `ngOnInit` se utiliza para la lógica de inicialización que debe realizarse después de que se hayan inicializado las propiedades vinculadas a datos del componente.

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



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La entrada del usuario se maneja mediante formularios angulares, que pueden ser formularios reactivos o basados en plantillas.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-login',

    template: `

    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

        <input formControlName="username" />

        <input formControlName="password" type="password" />

        <button type="submit">Login</button>

    </form>

    `

})

export class LoginComponent {

    loginForm: FormGroup;



    constructor(private fb: FormBuilder) {

        this.loginForm = this.fb.group({

            username: ['', Validators.required],

            password: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.loginForm.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional entre los campos de entrada del formulario y las propiedades del componente.

<input [(ngModel)]="name" />

<p>Hello {{ name }}</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Una tubería personalizada se define utilizando el decorador `@Pipe` e implementando la interfaz `PipeTransform`.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para repetir una plantilla para cada elemento de una lista o matriz.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` se utiliza para agregar o eliminar dinámicamente clases CSS según la expresión.

<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">

    Styled text

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para definir un evento que un componente secundario puede emitir a su componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="sendMessage()">Send</button>`

})

export class ChildComponent {

    @Output() message = new EventEmitter<string>();



    sendMessage() {

        this.message.emit('Hello from child');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede vincular una propiedad de componente a un atributo de elemento HTML utilizando la sintaxis de vinculación de propiedad con corchetes.

<img [src]="imageUrl" />

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se utiliza para incluir o excluir condicionalmente elementos del DOM basándose en una expresión booleana.

<div *ngIf="isVisible">Content is visible</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para acceder a un componente o elemento secundario dentro de la plantilla del componente.

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent) child: ChildComponent;



    ngAfterViewInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para marcar una clase como disponible para la inyección de dependencia.

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



@Injectable({

    providedIn: 'root'

})

export class MyService {

    getValue() {

        return 'Service value';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos se crean utilizando el servicio `FormBuilder` para construir el modelo de formulario y sus controles.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

        <input formControlName="name" />

        <button type="submit">Submit</button>

    </form>

    `

})

export class ReactiveFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El archivo `app.module.ts` define el módulo raíz de la aplicación, incluidos los componentes, directivas, canalizaciones y servicios que se utilizan en toda la aplicación.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los eventos se manejan utilizando la sintaxis de enlace de eventos de Angular, con paréntesis alrededor del nombre del evento.

<button (click)="handleClick()">Click me</button>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` se utiliza para mostrar elementos condicionalmente según el valor de una expresión.

<div [ngSwitch]="value">

    <p *ngSwitchCase="'case1'">Case 1</p>

    <p *ngSwitchCase="'case2'">Case 2</p>

    <p *ngSwitchDefault>Default case</p>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas secundarias se definen dentro de la propiedad `children` de un objeto de configuración de ruta.

const routes: Routes = [

    { path: 'parent', component: ParentComponent, children: [

        { path: 'child', component: ChildComponent }

    ]}

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` se utiliza para responder a cambios en las propiedades de entrada del componente.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<p>{{ value }}</p>'

})

export class ExampleComponent implements OnChanges {

    @Input() value: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se puede crear un servicio usando el decorador `@Injectable` con la opción `providedIn: 'root'` para que esté disponible en toda la aplicación.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Some data';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` se utiliza para aplicar estilos dinámicamente basados en una expresión.

<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">

    Styled text

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` se utiliza para escuchar eventos en el elemento host de la directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appHover]'

})

export class HoverDirective {

    @HostListener('mouseenter') onMouseEnter() {

        console.log('Mouse entered');

    }



    @HostListener('mouseleave') onMouseLeave() {

        console.log('Mouse left');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las solicitudes HTTP se manejan utilizando el servicio `HttpClient` proporcionado por el módulo `@angular/common/http`.

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

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



@Component({

    selector: 'app-http',

    template: '<p>Check console for HTTP request result</p>'

})

export class HttpComponent {

    constructor(private http: HttpClient) {

        this.http.get('https://api.example.com/data')

            .subscribe(data => console.log(data));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para limpiar recursos y cancelar la suscripción a observables cuando se destruye un componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent implements OnDestroy {

    private subscription: Subscription;



    constructor() {

        this.subscription = // ... initialize subscription

    }



    ngOnDestroy() {

        this.subscription.unsubscribe();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional entre los campos de entrada del formulario y las propiedades del componente.

<input [(ngModel)]="name" />

<p>Hello {{ name }}</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Una tubería personalizada se define utilizando el decorador `@Pipe` e implementando la interfaz `PipeTransform`.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para repetir una plantilla para cada elemento de una lista o matriz.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` se utiliza para agregar o eliminar dinámicamente clases CSS según la expresión.

<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">

    Styled text

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para definir un evento que un componente secundario puede emitir a su componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="sendMessage()">Send</button>`

})

export class ChildComponent {

    @Output() message = new EventEmitter<string>();



    sendMessage() {

        this.message.emit('Hello from child');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede vincular una propiedad de componente a un atributo de elemento HTML utilizando la sintaxis de vinculación de propiedad con corchetes.

<img alt="" [src]="imageUrl" />

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se utiliza para incluir o excluir condicionalmente elementos del DOM basándose en una expresión booleana.

<div *ngIf="isVisible">Content is visible</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para acceder a un componente o elemento secundario dentro de la plantilla del componente.

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent) child: ChildComponent;



    ngAfterViewInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para marcar una clase como disponible para la inyección de dependencia.

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



@Injectable({

    providedIn: 'root'

})

export class MyService {

    getValue() {

        return 'Service value';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos se crean utilizando el servicio `FormBuilder` para construir el modelo de formulario y sus controles.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

        <input formControlName="name" />

        <button type="submit">Submit</button>

    </form>

    `

})

export class ReactiveFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El archivo `app.module.ts` define el módulo raíz de la aplicación, incluidos los componentes, directivas, canalizaciones y servicios que se utilizan en toda la aplicación.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los eventos se manejan utilizando la sintaxis de enlace de eventos de Angular, con paréntesis alrededor del nombre del evento.

<button (click)="handleClick()">Click me</button>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` se utiliza para mostrar elementos condicionalmente según el valor de una expresión.

<div [ngSwitch]="value">

    <p *ngSwitchCase="'case1'">Case 1</p>

    <p *ngSwitchCase="'case2'">Case 2</p>

    <p *ngSwitchDefault>Default case</p>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas secundarias se definen dentro de la propiedad `children` de un objeto de configuración de ruta.

const routes: Routes = [

    { path: 'parent', component: ParentComponent, children: [

        { path: 'child', component: ChildComponent }

    ]}

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` se utiliza para responder a cambios en las propiedades de entrada del componente.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<p>{{ value }}</p>'

})

export class ExampleComponent implements OnChanges {

    @Input() value: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se puede crear un servicio usando el decorador `@Injectable` con la opción `providedIn: 'root'` para que esté disponible en toda la aplicación.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Some data';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` se utiliza para aplicar estilos dinámicamente basados en una expresión.

<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">

    Styled text

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` se utiliza para escuchar eventos en el elemento host de la directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appHover]'

})

export class HoverDirective {

    @HostListener('mouseenter') onMouseEnter() {

        console.log('Mouse entered');

    }



    @HostListener('mouseleave') onMouseLeave() {

        console.log('Mouse left');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las solicitudes HTTP se manejan utilizando el servicio `HttpClient` proporcionado por el módulo `@angular/common/http`.

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

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



@Component({

    selector: 'app-http',

    template: '<p>Check console for HTTP request result</p>'

})

export class HttpComponent {

    constructor(private http: HttpClient) {

        this.http.get('https://api.example.com/data')

            .subscribe(data => console.log(data));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para limpiar recursos y cancelar la suscripción a observables cuando se destruye un componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-example',

    template: '<p>Example component</p>'

})

export class ExampleComponent implements OnDestroy {

    private subscription: Subscription;



    constructor() {

        this.subscription = // ... initialize subscription

    }



    ngOnDestroy() {

        this.subscription.unsubscribe();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace del ciclo de vida `ngOnInit` se utiliza para la inicialización de componentes, incluida la recuperación de datos y la configuración de propiedades del componente.

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



@Component({

    selector: 'app-example',

    template: '<p>{{ message }}</p>'

})

export class ExampleComponent implements OnInit {

    message: string;



    ngOnInit() {

        this.message = 'Component initialized';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` vincula los valores de control de formulario a las propiedades de los componentes, lo que admite el enlace de datos bidireccional en los formularios.

<form>

    <input [(ngModel)]="username" name="username" />

    <p>Your username is: {{ username }}</p>

</form>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un servicio se define con el decorador `@Injectable` y se puede inyectar en componentes u otros servicios.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return ['Item 1', 'Item 2'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enrutamiento se configura utilizando el método `RouterModule.forRoot`, que proporciona definiciones de ruta en el módulo de la aplicación.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La validación se implementa utilizando los validadores integrados de Angular o validadores personalizados en los controles de formulario.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-validation-form',

    template: `

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

        <input formControlName="email" placeholder="Email" />

        <div *ngIf="form.get('email').invalid && form.get('email').touched">

            <p>Email is required and must be valid</p>

        </div>

        <button type="submit">Submit</button>

    </form>

    `

})

export class ValidationFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            email: ['', [Validators.required, Validators.email]]

        });

    }





    onSubmit() {

        if (this.form.valid) {

            console.log(this.form.value);

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cuando usa `ngFor` con objetos, puede iterar sobre las claves del objeto usando la canalización `keyvalue`.

<ul>

    <li *ngFor="let item de object | keyvalue">{{ item.key }}: {{ item.value }}</li>

</ul>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngAfterViewInit` se utiliza para realizar acciones después de que Angular inicializa la vista del componente y las vistas secundarias.

import { Component, AfterViewInit, ViewChild } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent) child: ChildComponent;



    ngAfterViewInit() {

        console.log('Child component:', this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede configurar dinámicamente estilos CSS usando la directiva `[ngStyle]` de Angular.

<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">

    Dynamic style content

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un módulo se crea utilizando el decorador `@NgModule` y puede incluir declaraciones, importaciones, proveedores y componentes de arranque.

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

import { CommonModule } from '@angular/common';

import { FeatureComponent } from './feature.component';



@NgModule({

    declarations: [FeatureComponent],

    imports: [CommonModule],

    exports: [FeatureComponent]

})

export class FeatureModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` le permite mostrar elementos basados en un valor coincidente.

<div [ngSwitch]="value">

    <div *ngSwitchCase="'case1'">Case 1</div>

    <div *ngSwitchCase="'case2'">Case 2</div>

    <div *ngSwitchDefault>Default case</div>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las solicitudes HTTP se manejan mediante el servicio "HttpClient" de Angular.

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

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



@Component({

    selector: 'app-http',

    template: '<p>Data: {{ data }}</p>'

})

export class HttpComponent {

    data: any;



    constructor(private http: HttpClient) {

        this.http.get('https://api.example.com/data')

            .subscribe(response => this.data = response);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` se utiliza para definir propiedades que pueden recibir datos de un componente principal.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>'

})

export class ChildComponent {

    @Input() data: string;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` establece dinámicamente clases CSS en un elemento según las condiciones.

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">

    Conditional classes

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede crear un componente utilizando el comando Angular CLI `ng generate componente` o `ng g c`.

ng generate component my-component

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-content` se utiliza para la proyección de contenido, lo que le permite insertar contenido en la plantilla de un componente.

@Component({

    selector: 'app-wrapper',

    template: '<ng-content></ng-content>'

})

export class WrapperComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para consultar un único elemento o componente secundario.

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

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`

})

export class ParentComponent {

    @ViewChild(ChildComponent) child: ChildComponent;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para definir un evento que un componente secundario puede emitir a su componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: '<button (click)="sendMessage()">Send</button>'

})

export class ChildComponent {

    @Output() messageEvent = new EventEmitter<string>();



    sendMessage() {

        this.messageEvent.emit('Hello from child');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los errores en las solicitudes HTTP se pueden manejar utilizando el operador `catchError` en RxJS.

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

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

import { catchError } from 'rxjs/operators';

import { de } from 'rxjs';



@Component({

    selector: 'app-http',

    template: '<p>Data: {{ data }}</p>'

})

export class HttpComponent {

    data: any;



    constructor(private http: HttpClient) {

        this.http.get('https://api.example.com/data')

            .pipe(

                catchError(error => {

                    console.error('Error:', error);

                    return of([]);

                })

            )

            .subscribe(response => this.data = response);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas con parámetros se definen utilizando dos puntos `:` seguidos del nombre del parámetro.

const routes: Routes = [

    { path: 'user/:id', component: UserComponent }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para realizar tareas de limpieza cuando se destruye el componente.

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



@Component({

    selector: 'app-example',

    template: '<p>Component with cleanup</p>'

})

export class ExampleComponent implements OnDestroy {

    ngOnDestroy() {

        console.log('Component destroyed');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para crear eventos personalizados que un componente puede emitir.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-custom-button',

    template: '<button (click)="onClick()">Click me</button>'

})

export class CustomButtonComponent {

    @Output() clicked = new EventEmitter<void>();



    onClick() {

        this.clicked.emit();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para obtener una referencia a un componente o elemento secundario en la plantilla.

import { Component, ViewChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<input #inputElement />'

})

export class ExampleComponent {

    @ViewChild('inputElement') input!: ElementRef;



    ngAfterViewInit() {

        this.input.nativeElement.focus();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se utiliza para incluir o excluir elementos según una condición.

<div *ngIf="isVisible">This content is visible</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para definir un servicio que se puede inyectar en componentes u otros servicios.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Data';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se puede utilizar para iterar sobre objetos utilizando la sintaxis del par clave-valor.

<div *ngFor="let key de objectKeys(myObject)">

    {{ key }}: {{ myObject[key] }}

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    myObject = { a: 1, b: 2, c: 3 };

    objectKeys = Object.keys;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` se utiliza para vincular una propiedad del elemento host a una propiedad en la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlighted') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se puede crear una tubería personalizada para filtrar una lista según una condición.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({ name: 'filterList' })

export class FilterListPipe implements PipeTransform {

    transform(items: any[], searchText: string): any[] {

        if (!items) return [];

        if (!searchText) return items;

        searchText = searchText.toLowerCase();

        return items.filter(item => item.toLowerCase().includes(searchText));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` se utiliza para obtener una referencia a un elemento secundario proyectado en la vista del componente.

import { Component, ContentChild, AfterContentInit, ElementRef } from '@angular/core';



@Component({

    selector: 'app-parent',

    template: '<ng-content></ng-content>'

})

export class ParentComponent implements AfterContentInit {

    @ContentChild('content') content!: ElementRef;



    ngAfterContentInit() {

        console.log(this.content.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` se utiliza para pasar datos de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>'

})

export class ChildComponent {

    @Input() data!: string;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` se puede utilizar para aplicar condicionalmente clases CSS basadas en una condición.

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">

    Content

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Inject` se utiliza para especificar una dependencia para inyección cuando no se puede inferir el tipo.

import { Injectable, Inject } from '@angular/core';



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    constructor(@Inject(String) private value: string) { }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional en formularios.

<input [(ngModel)]="value" />

<p>Value: {{ value }}</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    value = 'Initial value';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-template` define una plantilla que se puede representar condicionalmente.

<ng-template #template>

    </ng-template><ng-template #template><p>This is a template</p>

</ng-template>



<div *ngIf="showTemplate; else template">

    <p>Content when condition is true</p>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` se utiliza para detectar y actuar sobre cambios en las propiedades de entrada.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '<p>{{ data }}</p>'

})

export class ExampleComponent implements OnChanges {

    @Input() data!: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log(changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se utiliza para realizar la inicialización del componente después de que Angular haya inicializado todas las propiedades vinculadas a datos.

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



@Component({

    selector: 'app-example',

    template: '<p>Component initialized</p>'

})

export class ExampleComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` se utiliza para mostrar condicionalmente elementos basados en una expresión de cambio.

<div [ngSwitch]="condition">

    <p *ngSwitchCase="'value1'">Case 1</p>

    <p *ngSwitchCase="'value2'">Case 2</p>

    <p *ngSwitchDefault>Default case</p>

</div>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `ngContainer` se utiliza para agrupar elementos sin agregar elementos DOM adicionales.

<ng-container *ngIf="isVisible">

    </ng-container><ng-container *ngIf="isVisible"><p>Content is visible</p>

</ng-container>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para repetir un bloque de HTML para cada elemento de una matriz.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional con entradas de formulario.

<input [(ngModel)]="inputValue" />

<p>Input value: {{ inputValue }}</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    inputValue = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` se utiliza para definir un módulo Angular, incluidos sus componentes, directivas y servicios.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se utiliza para incluir o excluir un bloque de HTML según una condición.

<div *ngIf="isVisible">

    <p>This content is conditionally rendered</p>

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se utiliza para realizar la lógica de inicialización después de que Angular haya establecido todas las propiedades de entrada.

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



@Component({

    selector: 'app-example',

    template: '<p>Component Initialized</p>'

})

export class ExampleComponent implements OnInit {

    ngOnInit() {

        console.log('Component Initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` se puede utilizar para agregar o eliminar dinámicamente clases CSS según las condiciones.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">

    Content with dynamic classes

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Para crear una directiva personalizada, utiliza el decorador `@Directive` e implementa la lógica de la directiva.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {}



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para recorrer una matriz y generar HTML para cada elemento.

<ul>

    <li *ngFor="let item de items">{{ item.name }} - {{ item.value }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    items = [

        { name: 'Item 1', value: 10 },

        { name: 'Item 2', value: 20 },

        { name: 'Item 3', value: 30 }

    ];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` le permite pasar datos de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>'

})

export class ChildComponent {

    @Input() data!: string;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para definir un evento que un componente puede emitir a su componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-button',

    template: '<button (click)="onClick()">Click me</button>'

})

export class ButtonComponent {

    @Output() clicked = new EventEmitter<void>();



    onClick() {

        this.clicked.emit();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` define un módulo Angular, incluidos sus componentes, directivas, canalizaciones y servicios.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace de eventos se realiza utilizando paréntesis alrededor del nombre del evento en la plantilla.

<button (click)="handleClick()">Click me</button>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    handleClick() {

        console.log('Button clicked');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `ng-container` se utiliza para agrupar elementos sin agregar elementos DOM adicionales.

<ng-container *ngIf="isVisible">

    </ng-container><ng-container *ngIf="isVisible"><p>Content is visible</p>

</ng-container>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La validación de formularios se maneja utilizando `FormGroup` y `FormControl` con validadores integrados o personalizados.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: '<form [formGroup]="form" (ngSubmit)="onSubmit()">...</form>'

})

export class FormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required],

            email: ['', [Validators.required, Validators.email]]

        });

    }



    onSubmit() {

        if (this.form.valid) {

            console.log(this.form.value);

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` se utiliza para escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Element clicked', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` se utiliza para realizar solicitudes HTTP a un servidor y manejar respuestas.

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

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



@Component({

    selector: 'app-data',

    template: '...',

})

export class DataComponent {

    constructor(private http: HttpClient) {}



    fetchData() {

        this.http.get('https://api.example.com/data').subscribe(data => {

            console.log(data);

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para limpiar recursos, como cancelar la suscripción a observables o desconectar controladores de eventos, antes de que se destruya un componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent implements OnDestroy {

    private subscription: Subscription;



    constructor() {

        this.subscription = someObservable.subscribe();

    }



    ngOnDestroy() {

        this.subscription.unsubscribe();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para vincular valores de entrada de formulario a propiedades de componentes con enlace de datos bidireccional.

<input [(ngModel)]="inputValue" />

<p>Input value: {{ inputValue }}</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    inputValue = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` marca una clase como disponible para inyección de dependencia.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Data from service';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enrutamiento en Angular se configura utilizando `RouterModule` y definiendo rutas en un módulo de enrutamiento.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree un servicio usando `@Injectable`, luego inyéctelo en el constructor de un componente.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Data from service';

    }

}



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private exampleService: ExampleService) {

        console.log(this.exampleService.getData());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos angulares son clases con un decorador `@NgModule` que define un contexto para un conjunto de componentes, directivas, canalizaciones y servicios. Creas un módulo usando `@NgModule`.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Pipe` define una tubería personalizada para transformar datos en plantillas.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice el comando Angular CLI `ng generar componente `para crear un nuevo componente.

ng generate component my-component



// The command creates a folder with four files:

// my-component.component.ts

// my-component.component.html

// my-component.component.css

// my-component.component.spec.ts

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Component` se utiliza para definir un componente, incluidos sus metadatos como selector, plantilla y URL de estilo.

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



@Component({

    selector: 'app-example',

    templateUrl: './example.component.html',

    styleUrls: ['./example.component.css']

})

export class ExampleComponent {

    // Component logic

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Maneje el envío de formularios usando el evento `(ngSubmit)` en la plantilla y manejándolo en el componente.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">

    <input name="name" ngModel required />

    <button type="submit">Submit</button>

</form>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    onSubmit() {

        console.log('Form submitted');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice la directiva `*ngIf` de Angular para representar condicionalmente elementos según una condición.

<div *ngIf="isVisible">

    <p>This content is conditionally rendered</p>

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` define un módulo Angular, incluidas declaraciones, importaciones, proveedores y componentes de arranque.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace de datos se realiza mediante interpolación `{{}}`, enlace de propiedad `[propiedad]` y enlace de evento `(evento)`.

<!-- Interpolation -->

<p>{{ message }}</p>



<!-- Property Binding -->

<img [src]="imageUrl" />



<!-- Event Binding -->

<button (click)="handleClick()">Click me</button>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    message = 'Hello, Angular!';

    imageUrl = 'https://example.com/image.jpg';



    handleClick() {

        console.log('Button clicked');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para repetir un elemento para cada elemento de una matriz.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` marca una clase como disponible para inyección de dependencia.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Data from service';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` permite el enlace de datos bidireccional vinculando los valores de entrada del formulario a las propiedades del componente.

<input [(ngModel)]="inputValue" />

<p>Input value: {{ inputValue }}</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    inputValue = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas se definen utilizando `RouterModule` y especificando configuraciones de ruta en un módulo de enrutamiento.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Element clicked', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Pipe` define una tubería personalizada para transformar datos en plantillas.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Inyecte un servicio en un componente agregándolo al constructor del componente.

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

import { ExampleService } from './example.service';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private exampleService: ExampleService) {

        console.log(this.exampleService.getData());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos angulares son clases anotadas con `@NgModule` que agrupan componentes, directivas, canalizaciones y servicios relacionados. Se utilizan para organizar una aplicación en bloques cohesivos.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite agregar o eliminar dinámicamente clases CSS según las condiciones.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">

    Conditional styling

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Maneje la entrada del usuario utilizando el módulo de formularios de Angular, ya sea con formularios basados en plantillas o formularios reactivos.

<!-- Template-driven form -->

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

    <input name="name" ngModel required />

    <button type="submit">Submit</button>

</form>



<!-- Reactive form -->

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['']

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree una tubería personalizada definiendo una clase con el decorador `@Pipe` e implementando la interfaz `PipeTransform`.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'uppercase'

})

export class UppercasePipe implements PipeTransform {

    transform(value: string): string {

        return value.toUpperCase();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace del ciclo de vida `ngOnInit` se utiliza para inicializar las propiedades del componente y realizar cualquier configuración necesaria después de que se hayan inicializado las propiedades vinculadas a datos del componente.

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



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Pase datos a un componente secundario usando las propiedades `@Input`.

<!-- Parent component template -->

<app-child [data]="parentData"></app-child>



<!-- Child component -->

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



@Component({

    selector: 'app-child',

    template: '...',

})

export class ChildComponent {

    @Input() data: any;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para emitir eventos de un componente secundario a un componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: '<button (click)="notify()">Notify</button>',

})

export class ChildComponent {

    @Output() notifyEvent = new EventEmitter<void>();



    notify() {

        this.notifyEvent.emit();

    }

}



// Parent component template

<app-child (notifyEvent)="onNotify()"></app-child>



@Component({

    selector: 'app-parent',

    template: '...',

})

export class ParentComponent {

    onNotify() {

        console.log('Notification received');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice el comando Angular CLI `ng generar componente `para crear un nuevo componente.

ng generate component my-component



// The command creates a folder with four files:

// my-component.component.ts

// my-component.component.html

// my-component.component.css

// my-component.component.spec.ts

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Component` se utiliza para definir un componente, incluidos sus metadatos como selector, plantilla y URL de estilo.

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



@Component({

    selector: 'app-example',

    templateUrl: './example.component.html',

    styleUrls: ['./example.component.css']

})

export class ExampleComponent {

    // Component logic

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Maneje el envío de formularios usando el evento `(ngSubmit)` en la plantilla y manejándolo en el componente.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">

    <input name="name2" ngModel required />

    <button type="submit">Submit</button>

</form>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    onSubmit() {

        console.log('Form submitted');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice la directiva `*ngIf` de Angular para representar condicionalmente elementos según una condición.

<div *ngIf="isVisible">

    <p>This content is conditionally rendered</p>

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` define un módulo Angular, incluidas declaraciones, importaciones, proveedores y componentes de arranque.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace de datos se realiza mediante interpolación `{{}}`, enlace de propiedad `[propiedad]` y enlace de evento `(evento)`.

<!-- Interpolation -->

<p>{{ message }}</p>



<!-- Property Binding -->

<img alt="" [src]="imageUrl" />



<!-- Event Binding -->

<button (click)="handleClick()">Click me</button>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    message = 'Hello, Angular!';

    imageUrl = 'https://example.com/image.jpg';



    handleClick() {

        console.log('Button clicked');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para repetir un elemento para cada elemento de una matriz.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` marca una clase como disponible para inyección de dependencia.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return 'Data from service';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` permite el enlace de datos bidireccional vinculando los valores de entrada del formulario a las propiedades del componente.

<input [(ngModel)]="inputValue" />

<p>Input value: {{ inputValue }}</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    inputValue = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las rutas se definen utilizando `RouterModule` y especificando configuraciones de ruta en un módulo de enrutamiento.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Element clicked', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Pipe` define una tubería personalizada para transformar datos en plantillas.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Inyecte un servicio en un componente agregándolo al constructor del componente.

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

import { ExampleService } from './example.service';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private exampleService: ExampleService) {

        console.log(this.exampleService.getData());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos angulares son clases anotadas con `@NgModule` que agrupan componentes, directivas, canalizaciones y servicios relacionados. Se utilizan para organizar una aplicación en bloques cohesivos.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite agregar o eliminar dinámicamente clases CSS según las condiciones.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">

    Conditional styling

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Maneje la entrada del usuario utilizando el módulo de formularios de Angular, ya sea con formularios basados en plantillas o formularios reactivos.

<!-- Template-driven form -->

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

    <input name="name2" ngModel required />

    <button type="submit">Submit</button>

</form>



<!-- Reactive form -->

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['']

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree una tubería personalizada definiendo una clase con el decorador `@Pipe` e implementando la interfaz `PipeTransform`.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'uppercase'

})

export class UppercasePipe implements PipeTransform {

    transform(value: string): string {

        return value.toUpperCase();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El enlace del ciclo de vida `ngOnInit` se utiliza para inicializar las propiedades del componente y realizar cualquier configuración necesaria después de que se hayan inicializado las propiedades vinculadas a datos del componente.

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



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Pase datos a un componente secundario usando las propiedades `@Input`.

<!-- Parent component template -->

<app-child [data]="parentData"></app-child>



<!-- Child component -->

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



@Component({

    selector: 'app-child',

    template: '...',

})

export class ChildComponent {

    @Input() data: any;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para emitir eventos de un componente secundario a un componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: '<button (click)="notify()">Notify</button>',

})

export class ChildComponent {

    @Output() notifyEvent = new EventEmitter<void>();



    notify() {

        this.notifyEvent.emit();

    }

}



// Parent component template

<app-child (notifyEvent)="onNotify()"></app-child>



@Component({

    selector: 'app-parent',

    template: '...',

})

export class ParentComponent {

    onNotify() {

        console.log('Notification received');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree un módulo usando el comando Angular CLI `ng generar módulo ` o manualmente definiendo una clase con el decorador `@NgModule`.

ng generate module my-module



// Example de manually creating a module

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

import { CommonModule } from '@angular/common';

import { MyComponent } from './my.component';



@NgModule({

    declarations: [MyComponent],

    imports: [CommonModule],

    exports: [MyComponent]

})

export class MyModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configure el enrutamiento definiendo rutas en `AppRoutingModule` y usando ` `directiva en la plantilla principal.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }



// In the main template

<router-outlet></router-outlet>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Implemente la carga diferida configurando rutas con la propiedad `loadChildren`.

const routes: Routes = [

    { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



// In home-routing.module.ts

const routes: Routes = [

    { path: '', component: HomeComponent }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los servicios angulares son clases que manejan la lógica empresarial y el acceso a datos. Se utilizan inyectándolos en componentes u otros servicios.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return 'Data from service';

    }

}



// Injecting service into a component

@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private dataService: DataService) {

        console.log(this.dataService.getData());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Realice solicitudes HTTP utilizando el servicio `HttpClient`.

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

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    constructor(private http: HttpClient) { }



    fetchData() {

        return this.http.get('https://api.example.com/data');

    }

}



// In the component

@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    data: any;



    constructor(private dataService: DataService) {

        this.dataService.fetchData().subscribe(response => {

            this.data = response;

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` incluye o excluye condicionalmente elementos en el DOM según una expresión.

<div *ngIf="isVisible">

    <p>This content is visible</p>

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` repite un elemento para cada elemento de una matriz.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para crear eventos personalizados que los componentes pueden emitir para notificar a sus componentes principales.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: '<button (click)="notify()">Notify</button>',

})

export class ChildComponent {

    @Output() notifyEvent = new EventEmitter<void>();



    notify() {

        this.notifyEvent.emit();

    }

}



// In the parent component

@Component({

    selector: 'app-parent',

    template: '...',

})

export class ParentComponent {

    onNotify() {

        console.log('Notification received');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` se utiliza para pasar datos de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: '<p>{{ data }}</p>',

})

export class ChildComponent {

    @Input() data: string;

}



// In the parent component

@Component({

    selector: 'app-parent',

    template: '<app-child [data]="parentData"></app-child>',

})

export class ParentComponent {

    parentData = 'Data from parent';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos en Angular se utilizan para organizar una aplicación en bloques cohesivos. Ayudan a gestionar y encapsular componentes, servicios, directivas y tuberías.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { MyModule } from './my.module';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule, MyModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La validación de formularios en Angular se puede manejar utilizando validadores integrados o validadores personalizados en formularios reactivos y basados en plantillas.

<!-- Template-driven form -->

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

    <input name="name3" ngModel required />

    <div *ngIf="myForm.submitted && !myForm.controls.name?.valid">

        Name is required

    </div>

    <button type="submit">Submit</button>

</form>



// Reactive form

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        if (this.form.valid) {

            console.log(this.form.value);

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree directivas personalizadas para ampliar el comportamiento de los elementos de su aplicación.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) { }



    @HostListener('mouseover') onMouseOver() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseout') onMouseOut() {

        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

    }

}



// In the component template

<p appHighlight>Hover over me!</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La estrategia de detección de cambios de Angular determina cómo y cuándo se actualiza la vista. La estrategia predeterminada es "CheckAlways", pero se puede personalizar como "OnPush" para optimizar el rendimiento.

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



@Component({

    selector: 'app-example',

    template: '...',

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class ExampleComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Implemente la inyección de dependencia proporcionando servicios en módulos o componentes de Angular e inyectándolos en los constructores.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return 'Data from service';

    }

}



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private dataService: DataService) {

        console.log(this.dataService.getData());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular proporciona canalizaciones integradas para formatear datos en plantillas, como `DatePipe`, `CurrencyPipe` y `DecimalPipe`.

<p>{{ today | date:'shortDate' }}</p>

<p>{{ amount | currency:'USD' }}</p>

<p>{{ number | number:'1.2-2' }}</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    today = new Date();

    amount = 1234.56;

    number = 1234.5678;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La gestión del estado en Angular se puede manejar mediante servicios o soluciones más avanzadas como NgRx para aplicaciones grandes.

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

import { BehaviorSubject } from 'rxjs';



@Injectable({

    providedIn: 'root'

})

export class StateService {

    private state = new BehaviorSubject<any>({});

    state$ = this.state.asObservable();



    setState(newState: any) {

        this.state.next(newState);

    }

}



// In the component

@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    state$ = this.stateService.state$;



    constructor(private stateService: StateService) { }



    updateState() {

        this.stateService.setState({ key: 'value' });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Maneje los errores en las solicitudes HTTP utilizando el operador `catchError` de RxJS y manejándolos en el servicio.

import { catchError } from 'rxjs/operators';

import { throwError } from 'rxjs';



@Injectable({

    providedIn: 'root'

})

export class DataService {

    constructor(private http: HttpClient) { }



    fetchData() {

        return this.http.get('https://api.example.com/data').pipe(

            catchError(error => {

                console.error('Error occurred:', error);

                return throwError(error);

            })

        );

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para realizar la limpieza antes de que se destruya el componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent implements OnDestroy {

    private subscription: Subscription;



    ngOnDestroy() {

        if (this.subscription) {

            this.subscription.unsubscribe();

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: MouseEvent) {

        console.log('Element clicked:', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` le permite configurar múltiples estilos en línea de forma dinámica en función de una expresión.

<div [ngStyle]="{'color': isRed ? 'red' : 'blue', 'font-size': fontSize + 'px'}">

    Dynamic styling

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isRed = true;

    fontSize = 16;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite agregar o eliminar dinámicamente clases CSS basadas en una expresión.

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

    Dynamic classes

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isActive = true;

    isDisabled = false;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las guardas angulares se utilizan para proteger rutas y controlar el acceso. Se pueden implementar utilizando interfaces como `CanActivate`, `CanDeactivate`, `Resolve` y `CanLoad`.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

    providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }



    canActivate(): boolean {

        const isAuthenticated = false; // Replace with actual authentication check

        if (isAuthenticated) {

            return true;

        } else {

            this.router.navigate(['/login']);

            return false;

        }

    }

}



// In app-routing.module.ts

const routes: Routes = [

    { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los decoradores `@ContentChild` y `@ContentChildren` se utilizan para acceder al contenido proyectado en un componente usando `ng-content`.

import { Component, ContentChild, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

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



@Component({

    selector: 'app-parent',

    template: '<ng-content></ng-content>',

})

export class ParentComponent implements AfterContentInit {

    @ContentChild('header') header: ElementRef;

    @ContentChildren('item') items: QueryList<ElementRef>;



    ngAfterContentInit() {

        console.log(this.header.nativeElement.textContent);

        this.items.forEach(item => console.log(item.nativeElement.textContent));

    }

}



// In the parent component template

<app-parent>

    </app-parent><app-parent><h1 #header>Header</h1>

    <p #item>Item 1</p>

    <p #item>Item 2</p>

</app-parent>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`Renderer2` es un servicio Angular que se utiliza para manipular el DOM de una manera segura y compatible con diferentes plataformas.

import { Renderer2, ElementRef, AfterViewInit } from '@angular/core';

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



@Component({

    selector: 'app-example',

    template: '<div #myDiv></div>',

})

export class ExampleComponent implements AfterViewInit {

    constructor(private renderer: Renderer2, private el: ElementRef) { }



    ngAfterViewInit() {

        const div = this.el.nativeElement.querySelector('div');

        this.renderer.setStyle(div, 'color', 'red');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormArray` se utiliza para administrar una serie de controles de formulario o grupos de formularios. Permite la adición y eliminación dinámica de elementos de formulario.

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }



    removeItem(index: number) {

        this.items.removeAt(index);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice las importaciones de `NgModule` para incluir otros módulos en su módulo y las exportaciones para que los componentes, directivas o canalizaciones estén disponibles fuera del módulo.

@NgModule({

    imports: [CommonModule, FormsModule],

    declarations: [MyComponent],

    exports: [MyComponent]

})

export class MyModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@ViewChild` y `@ViewChildren` se utilizan para acceder a elementos o componentes dentro de la vista del componente.

import { Component, ViewChild, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';



@Component({

    selector: 'app-example',

    template: `

        <p #paragraph>Paragraph 1</p>

        <p #paragraph>Paragraph 2</p>

    `,

})

export class ExampleComponent implements AfterViewInit {

    @ViewChild('paragraph') paragraph: ElementRef;

    @ViewChildren('paragraph') paragraphs: QueryList<ElementRef>;



    ngAfterViewInit() {

        console.log(this.paragraph.nativeElement.textContent);

        this.paragraphs.forEach(p => console.log(p.nativeElement.textContent));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las tuberías angulares transforman datos en plantillas. Puede crear tuberías personalizadas implementando la interfaz `PipeTransform`.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}



// In the component template

<p>{{ 'Hello' | reverse }}</p>

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los ganchos del ciclo de vida son métodos que Angular llama en diferentes etapas del ciclo de vida de un componente, como `ngOnInit`, `ngOnChanges`, `ngOnDestroy`, etc.

import { Component, OnInit, OnDestroy } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent implements OnInit, OnDestroy {

    ngOnInit() {

        console.log('Component initialized');

    }



    ngOnDestroy() {

        console.log('Component destroyed');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ChangeDetectorRef` se utiliza para activar manualmente la detección de cambios.

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



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private cdr: ChangeDetectorRef) { }



    triggerChangeDetection() {

        this.cdr.detectChanges();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La validación de formularios en Angular se maneja mediante validadores en controles de formulario o grupos de formularios. Los validadores pueden ser sincrónicos o asincrónicos.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', [Validators.required, Validators.minLength(3)]]

        });

    }



    get name() {

        return this.form.get('name');

    }



    onSubmit() {

        if (this.form.valid) {

            console.log(this.form.value);

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice `HttpInterceptor` para interceptar solicitudes y respuestas HTTP para tareas como agregar encabezados o iniciar sesión.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const authReq = req.clone({

            headers: req.headers.set('Authorization', 'Bearer token')

        });

        return next.handle(authReq);

    }

}



// In app.module.ts

providers: [

    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

]

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` permite que un componente reciba datos de su padre, y el decorador `@Output` permite que un componente emita eventos a su padre.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="notify()">Notify</button>`,

})

export class ChildComponent {

    @Input() message: string;

    @Output() notify: EventEmitter<string> = new EventEmitter<string>();



    notifyParent() {

        this.notify.emit('Hello from child');

    }

}



@Component({

    selector: 'app-parent',

    template: `<app-child [message]="parentMessage" (notify)="onNotify($event)"></app-child>`,

})

export class ParentComponent {

    parentMessage = 'Message from parent';



    onNotify(message: string) {

        console.log(message);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree un módulo de carga diferida utilizando la propiedad `loadChildren` en la configuración de enrutamiento.

const routes: Routes = [

    {

        path: 'lazy',

        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

    }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice `NgModule` para organizar una aplicación en bloques cohesivos de funcionalidad, lo que ayuda con la organización y reutilización del código.

@NgModule({

    declarations: [Component1, Component2],

    imports: [CommonModule, FormsModule],

    exports: [Component1]

})

export class SharedModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ViewEncapsulation` controla cómo se encapsulan los estilos dentro de un componente. Las opciones incluyen "Emulado", "Nativo" y "Ninguno".

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



@Component({

    selector: 'app-example',

    template: '...',

    styles: [`p { color: red; }`],

    encapsulation: ViewEncapsulation.None

})

export class ExampleComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La canalización `async` se suscribe automáticamente a un observable o promesa y devuelve el valor más reciente.

@Component({

    selector: 'app-example',

    template: `<p>{{ data$ | async }}</p>`,

})

export class ExampleComponent {

    data$ = this.dataService.getData();



    constructor(private dataService: DataService) { }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para repetir un bloque de HTML para cada elemento de una matriz o lista.

<ul>

    <li *ngFor="let item de items">{{ item }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` incluye o excluye condicionalmente un bloque de HTML basado en una expresión.

<p *ngIf="isVisible">Visible content</p>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` le permite incluir condicionalmente uno de varios elementos según un valor.

<div [ngSwitch]="selectedValue">

    <p *ngSwitchCase="'A'">Case A</p>

    <p *ngSwitchCase="'B'">Case B</p>

    <p *ngSwitchDefault>Default case</p>

</div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    selectedValue = 'A';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` marca una clase como disponible para ser proporcionada e inyectada como una dependencia.

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



@Injectable({

    providedIn: 'root',

})

export class ExampleService {

    constructor() { }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`NgZone` se usa para ejecutar código dentro o fuera de la zona de Angular para controlar la detección de cambios.

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



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private ngZone: NgZone) { }



    runOutsideAngular() {

        this.ngZone.runOutsideAngular(() => {

            // Code here will not trigger Angular's change detection

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appHover]'

})

export class HoverDirective {

    @HostListener('mouseenter') onMouseEnter() {

        console.log('Mouse entered');

    }



    @HostListener('mouseleave') onMouseLeave() {

        console.log('Mouse left');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@ViewEncapsulation` controla cómo se aplican los estilos a la vista del componente. Puede ser "Emulado", "Nativo" o "Ninguno".

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



@Component({

    selector: 'app-example',

    template: `<p>Styled text</p>`,

    styles: [`p { color: green; }`],

    encapsulation: ViewEncapsulation.Emulated

})

export class ExampleComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`Renderer2` es un servicio para manipular el DOM de forma segura.

import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';



@Component({

    selector: 'app-example',

    template: `<div #myDiv></div>`,

})

export class ExampleComponent implements OnInit {

    constructor(private renderer: Renderer2, private el: ElementRef) { }



    ngOnInit() {

        const div = this.el.nativeElement.querySelector('div');

        this.renderer.setStyle(div, 'color', 'blue');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`HttpClient` se utiliza para realizar solicitudes HTTP y manejar respuestas.

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

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



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    constructor(private http: HttpClient) { }



    fetchData() {

        this.http.get('https://api.example.com/data').subscribe(data => {

            console.log(data);

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`NgModule` se utiliza para organizar una aplicación Angular en bloques coherentes de funcionalidad.

@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule, HttpClientModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree una directiva personalizada para modificar el comportamiento o la apariencia de los elementos.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) { }



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngOnInit` se usa para la inicialización de componentes, mientras que `ngOnChanges` se usa para responder a cambios en las propiedades de entrada.

import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent implements OnInit, OnChanges {

    @Input() data: string;



    ngOnInit() {

        console.log('Component initialized');

    }



    ngOnChanges(changes: SimpleChanges) {

        console.log('Input properties changed', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormBuilder` simplifica la creación de formularios reactivos.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required],

            email: ['', [Validators.required, Validators.email]]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@Input` permite que un componente principal pase datos a un componente secundario, y `@Output` permite que un componente secundario emita eventos a un componente principal.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="notify()">Notify</button>`,

})

export class ChildComponent {

    @Input() childData: string;

    @Output() notify: EventEmitter<string> = new EventEmitter<string>();



    notifyParent() {

        this.notify.emit('Data from child');

    }

}



@Component({

    selector: 'app-parent',

    template: `<app-child [childData]="parentData" (notify)="handleNotify($event)"></app-child>`,

})

export class ParentComponent {

    parentData = 'Data from parent';



    handleNotify(data: string) {

        console.log(data);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice el módulo Router de Angular para definir rutas y navegar entre diferentes vistas.

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

import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '**', redirectTo: 'home' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree un módulo de funciones para encapsular componentes, directivas y servicios relacionados.

@NgModule({

    declarations: [FeatureComponent],

    imports: [CommonModule, SharedModule],

    exports: [FeatureComponent]

})

export class FeatureModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@ViewChild` le permite acceder a un componente secundario o directiva, y `@ContentChild` le permite acceder al contenido proyectado.

import { Component, ViewChild, ContentChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-example',

    template: `<p #paragraph>Content</p><ng-content></ng-content>`,

})

export class ExampleComponent {

    @ViewChild('paragraph') paragraph: ElementRef;

    @ContentChild('content') content: ElementRef;



    ngAfterViewInit() {

        console.log(this.paragraph.nativeElement.textContent);

    }



    ngAfterContentInit() {

        console.log(this.content.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngStyle` se usa para establecer dinámicamente múltiples estilos en línea para un elemento.

@Component({

    selector: 'app-example',

    template: `<div [ngStyle]="{'color': color, 'font-size': fontSize}">Styled text</div>`,

})

export class ExampleComponent {

    color = 'blue';

    fontSize = '20px';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngClass` se utiliza para agregar o eliminar dinámicamente clases CSS de un elemento según las condiciones.

@Component({

    selector: 'app-example',

    template: `<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Classy div</div>`,

})

export class ExampleComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngFor` se puede usar para iterar sobre objetos usando la canalización `keyvalue`.

<ul>

    <li *ngFor="let entry de object | keyvalue">{{ entry.key }}: {{ entry.value }}</li>

</ul>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent {

    object = { name: 'John', age: 30 };

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngTemplateOutlet` se utiliza para insertar dinámicamente un ` ` en el DOM.

<ng-template #template>

    </ng-template><ng-template #template><p>Template content</p>

</ng-template>



<div [ngTemplateOutlet]="template"></div>



@Component({

    selector: 'app-example',

    template: '...',

})

export class ExampleComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ngContent` se utiliza para proyectar contenido en la plantilla de un componente.

@Component({

    selector: 'app-example',

    template: `<ng-content></ng-content>`,

})

export class ExampleComponent { }



@Component({

    selector: 'app-parent',

    template: `<app-example></app-example><app-example><p>Projected content</p></app-example>`,

})

export class ParentComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@HostBinding` se utiliza para vincular propiedades del elemento host a propiedades de componentes o directivas.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlighted') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormArray` se utiliza para administrar una colección de controles de formulario en formularios reactivos angulares.

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

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';



@Component({

    selector: 'app-dynamic-form',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i" />

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `,

})

export class DynamicFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La carga diferida se implementa utilizando el módulo de enrutamiento de Angular definiendo rutas con una propiedad loadChildren.

const routes: Routes = [

    {

        path: 'feature',

        loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)

    }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los errores HTTP se pueden manejar utilizando `HttpInterceptor` de Angular para detectar y procesar errores HTTP globalmente.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';

import { catchError } from 'rxjs/operators';

import { throwError } from 'rxjs';



@Injectable()

export class ErrorInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler) {

        return next.handle(req).pipe(

            catchError((error: HttpErrorResponse) => {

                // Handle error

                console.error('HTTP Error:', error);

                return throwError(error);

            })

        );

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@ContentChildren` permite consultar el contenido proyectado en Angular.

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `

        <ng-content></ng-content>

    `,

})

export class ParentComponent implements AfterContentInit {

    @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;



    ngAfterContentInit() {

        console.log(this.children.toArray());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se puede usar con `else` para mostrar condicionalmente contenido alternativo.

@Component({

    selector: 'app-example',

    template: `

        <div *ngIf="isVisible; else notVisible">Content is visible</div>

        <ng-template #notVisible>Content is not visible</ng-template>

    `,

})

export class ExampleComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La función `trackBy` se utiliza para optimizar la representación de listas mediante el seguimiento de los cambios en los elementos de la lista.

@Component({

    selector: 'app-example',

    template: `

        <div *ngFor="let item de items; trackBy: trackById">{{ item.name }}</div>

    `,

})

export class ExampleComponent {

    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];



    trackById(index: number, item: any) {

        return item.id;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se crea una tubería personalizada para transformar los datos en la plantilla.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@HostListener` permite escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appHover]'

})

export class HoverDirective {

    @HostListener('mouseenter') onMouseEnter() {

        console.log('Mouse entered');

    }



    @HostListener('mouseleave') onMouseLeave() {

        console.log('Mouse left');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La validación de formularios se puede manejar utilizando los formularios reactivos y los validadores integrados de Angular.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: `

        <form [formGroup]="form" (ngSubmit)="onSubmit()">

            <input formControlName="name" />

            <div *ngIf="form.controls['name'].invalid">Name is required</div>

            <button type="submit">Submit</button>

        </form>

    `,

})

export class FormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Inject` se utiliza para especificar el proveedor que se inyectará en una clase.

import { Injectable, Inject } from '@angular/core';

import { API_URL } from './tokens';



@Injectable({

    providedIn: 'root'

})

export class ApiService {

    constructor(@Inject(API_URL) private apiUrl: string) { }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se puede implementar un manejo de errores personalizado utilizando `HttpInterceptor` de Angular para detectar y manejar errores HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';

import { catchError } from 'rxjs/operators';

import { throwError } from 'rxjs';



@Injectable()

export class CustomErrorInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler) {

        return next.handle(req).pipe(

            catchError((error: HttpErrorResponse) => {

                // Custom error handling logic

                console.error('An error occurred:', error.message);

                return throwError(error);

            })

        );

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un componente reutilizable se crea definiéndolo con un selector y proporcionando entradas y salidas.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-reusable',

    template: `

        <button (click)="onClick()">Click me</button>

    `,

})

export class ReusableComponent {

    @Input() label: string;

    @Output() clicked = new EventEmitter<void>();



    onClick() {

        this.clicked.emit();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La inyección de dependencia se utiliza para inyectar servicios u otras dependencias en componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return ['Item 1', 'Item 2'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El estado de la aplicación se puede gestionar mediante servicios o bibliotecas de gestión de estado como NgRx o Akita.

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

import { BehaviorSubject } from 'rxjs';



@Injectable({

    providedIn: 'root'

})

export class StateService {

    private state = new BehaviorSubject<any>({});

    state$ = this.state.asObservable();



    setState(newState: any) {

        this.state.next(newState);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las configuraciones de compilación e implementación se configuran en el archivo `angular.json`.

{

    "projects": {

        "my-app": {

            "architect": {

                "build": {

                    "options": {

                        "outputPath": "dist/my-app",

                        "index": "src/index.html",

                        "main": "src/main.ts",

                        "tsConfig": "tsconfig.app.json"

                    }

                }

            }

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los guardias de ruta se utilizan para controlar el acceso a las rutas según las condiciones.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

    providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }



    canActivate(): boolean {

        // Check authentication status

        const isAuthenticated = false;

        if (!isAuthenticated) {

            this.router.navigate(['/login']);

            return false;

        }

        return true;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`HttpClient` se utiliza para realizar solicitudes HTTP a una API de backend.

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

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



@Injectable({

    providedIn: 'root'

})

export class ApiService {

    constructor(private http: HttpClient) { }



    getData() {

        return this.http.get('https://api.example.com/data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los servicios se utilizan para compartir datos y lógica entre múltiples componentes.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return ['Item 1', 'Item 2'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@Input` se usa para pasar datos a un componente secundario y `@Output` se usa para emitir eventos desde un componente secundario.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="notify()">Notify</button>`,

})

export class ChildComponent {

    @Input() data: string;

    @Output() notifyEvent = new EventEmitter<string>();



    notify() {

        this.notifyEvent.emit('Notification from child');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`@ViewChild` se utiliza para acceder a un componente secundario o elemento DOM desde el componente principal.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';



@Component({

    selector: 'app-parent',

    template: `<p #paragraph>Paragraph</p>`,

})

export class ParentComponent implements AfterViewInit {

    @ViewChild('paragraph') paragraph: ElementRef;



    ngAfterViewInit() {

        console.log(this.paragraph.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` se utiliza para mostrar condicionalmente uno de varios elementos según el valor de una expresión.

@Component({

    selector: 'app-switch',

    template: `

        <div [ngSwitch]="value">

            <p *ngSwitchCase="'A'">Case A</p>

            <p *ngSwitchCase="'B'">Case B</p>

            <p *ngSwitchDefault>Default case</p>

        </div>

    `,

})

export class SwitchComponent {

    value = 'A';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se pueden crear directivas personalizadas para modificar el comportamiento o la apariencia de los elementos.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) { }



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los interceptores HTTP se utilizan para modificar solicitudes y respuestas HTTP.

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { ErrorInterceptor } from './error.interceptor';



@NgModule({

    providers: [

        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }

    ]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` vincula una propiedad del elemento host a una propiedad de la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appClass]'

})

export class ClassDirective {

    @HostBinding('class.active') isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChildren` se utiliza para consultar múltiples elementos o directivas en la plantilla.

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `

        <app-child *ngFor="let child de children"></app-child>

    `,

})

export class ParentComponent implements AfterViewInit {

    @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;



    ngAfterViewInit() {

        console.log(this.childComponents.toArray());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las operaciones asincrónicas se pueden manejar utilizando observables y operadores de RxJS.

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

import { ApiService } from './api.service';



@Component({

    selector: 'app-data',

    template: `

        <div *ngIf="data$ | async as data">

            {{ data | json }}

        </div>

    `,

})

export class DataComponent implements OnInit {

    data$ = this.apiService.getData();



    constructor(private apiService: ApiService) { }



    ngOnInit() { }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` permite consultar un único elemento de contenido proyectado.

import { Component, ContentChild, AfterContentInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<ng-content></ng-content>`,

})

export class ParentComponent implements AfterContentInit {

    @ContentChild(ChildComponent) child: ChildComponent;



    ngAfterContentInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` se utiliza para agregar o eliminar clases CSS dinámicamente.

@Component({

    selector: 'app-example',

    template: `

        <div [ngClass]="{'active': isActive, 'inactive': !isActive}">

            Conditional classes

        </div>

        <button (click)="toggle()">Toggle</button>

    `,

})

export class ExampleComponent {

    isActive = true;



    toggle() {

        this.isActive = !this.isActive;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional entre el control de formulario y el componente.

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



@Component({

    selector: 'app-two-way-binding',

    template: `

        <input [(ngModel)]="value" />

        <p>{{ value }}</p>

    `,

})

export class TwoWayBindingComponent {

    value = 'Initial value';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` marca una clase como un servicio que se puede inyectar en otros componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class ExampleService {

    getData() {

        return ['Data 1', 'Data 2'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Router` se utiliza para navegar mediante programación entre rutas.

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

import { Router } from '@angular/router';



@Component({

    selector: 'app-navigate',

    template: `

        <button (click)="goToHome()">Go to Home</button>

    `,

})

export class NavigateComponent {

    constructor(private router: Router) { }



    goToHome() {

        this.router.navigate(['/home']);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los solucionadores de rutas se utilizan para recuperar datos antes de navegar a una ruta.

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

import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';

import { Observable } from 'rxjs';

import { ApiService } from './api.service';



@Injectable({

    providedIn: 'root'

})

export class DataResolver implements Resolve<any> {

    constructor(private apiService: ApiService) { }



    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {

        return this.apiService.getData();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se pueden crear controles de formulario dinámicos utilizando el servicio `FormBuilder` de Angular.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-dynamic-form',

    template: `

        <form [formGroup]="formGroup">

            <input formControlName="dynamicControl" />

        </form>

    `,

})

export class DynamicFormComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            dynamicControl: ['']

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La función "trackBy" mejora el rendimiento al rastrear elementos por su identidad.

@Component({

    selector: 'app-list',

    template: `

        <ul>

            <li *ngFor="let item de items; trackBy: trackByFn">{{ item.name }}</li>

        </ul>

    `,

})

export class ListComponent {

    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];



    trackByFn(index: number, item: any) {

        return item.id;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` puede mostrar elementos condicionalmente con un bloque `else`.

@Component({

    selector: 'app-condition',

    template: `

        <div *ngIf="isVisible; else elseBlock">Visible</div>

        <ng-template #elseBlock>Not visible</ng-template>

    `,

})

export class ConditionComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`HttpClient` se utiliza para realizar solicitudes POST a una API de backend.

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

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



@Injectable({

    providedIn: 'root'

})

export class ApiService {

    constructor(private http: HttpClient) { }



    postData(data: any) {

        return this.http.post('https://api.example.com/data', data);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormArray` se utiliza para administrar una serie de controles de formulario.

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

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';



@Component({

    selector: 'app-dynamic-form-array',

    template: `

        <form [formGroup]="formGroup">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i" />

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `,

})

export class DynamicFormArrayComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            items: this.fb.array([this.fb.control('')])

        });

    }



    get items() {

        return this.formGroup.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para limpiar recursos cuando se destruye un componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-cleanup',

    template: `<p>Cleanup example</p>`,

})

export class CleanupComponent implements OnDestroy {

    private subscription: Subscription;



    ngOnDestroy() {

        this.subscription.unsubscribe();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-template` define una plantilla que se puede reutilizar o renderizar de forma condicional.

@Component({

    selector: 'app-template',

    template: `

        <ng-template #template let-data="data">

            </ng-template><ng-template #template let-data="data"><p>{{ data }}</p>

        </ng-template>

        <ng-container *ngTemplateOutlet="template; context: { data: 'Template data' }"></ng-container>

    `,

})

export class TemplateComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La función `trackBy` ayuda a Angular a rastrear elementos en una lista y mejorar el rendimiento de renderizado.

@Component({

    selector: 'app-track-by',

    template: `

        <ul>

            <li *ngFor="let item de items; trackBy: trackByFn">{{ item.name }}</li>

        </ul>

    `,

})

export class TrackByComponent {

    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];



    trackByFn(index: number, item: any) {

        return item.id;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se puede utilizar con un indicador estático para determinar cuándo se debe resolver la consulta.

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`,

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent, { static: true }) child: ChildComponent;



    ngAfterViewInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La sintaxis `let` en `ngFor` le permite definir una variable para cada elemento del bucle.

@Component({

    selector: 'app-list',

    template: `

        <ul>

            <li *ngFor="let item de items; let i = index">

                {{ i + 1 }}: {{ item }}

            </li>

        </ul>

    `,

})

export class ListComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` se usa para pasar datos de un componente principal a un componente secundario, mientras que el decorador `@Output` se usa para emitir eventos del componente secundario al principal.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `

        <button (click)="notifyParent()">Notify Parent</button>

    `,

})

export class ChildComponent {

    @Input() data: string;

    @Output() notify = new EventEmitter<string>();



    notifyParent() {

        this.notify.emit('Data from child');

    }

}



@Component({

    selector: 'app-parent',

    template: `

        <app-child [data]="parentData" (notify)="handleNotification($event)"></app-child>

    `,

})

export class ParentComponent {

    parentData = 'Data from parent';



    handleNotification(message: string) {

        console.log(message);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChildren` consulta varios elementos de contenido proyectados en un componente.

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<ng-content></ng-content>`,

})

export class ParentComponent implements AfterContentInit {

    @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;



    ngAfterContentInit() {

        this.children.forEach(child => console.log(child));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormGroup` y `FormControl` se utilizan para crear y administrar formularios reactivos.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">

            <input formControlName="name" />

            <button type="submit">Submit</button>

        </form>

    `,

})

export class ReactiveFormComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.formGroup.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `FormBuilder` simplifica la creación y validación de formularios en formularios Angular.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-builder-form',

    template: `

        <form [formGroup]="formGroup">

            <input formControlName="email" />

        </form>

    `,

})

export class BuilderFormComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            email: ['']

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `Validators` proporciona funciones de validación integradas para formularios.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-validate-form',

    template: `

        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">

            <input formControlName="email" />

            <div *ngIf="formGroup.controls.email.invalid">Invalid email</div>

            <button type="submit">Submit</button>

        </form>

    `,

})

export class ValidateFormComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            email: ['', [Validators.required, Validators.email]]

        });

    }



    onSubmit() {

        console.log(this.formGroup.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La carga diferida permite cargar módulos según demanda, lo que mejora el rendimiento de la aplicación.

const routes: Routes = [

    {

        path: 'lazy',

        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

    }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El envío de formularios en formularios reactivos se puede manejar suscribiéndose al observable `valueChanges` o `statusChanges` del formulario.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">

            <input formControlName="name" />

            <button type="submit">Submit</button>

        </form>

    `,

})

export class ReactiveFormComponent {

    formGroup: FormGroup;



    constructor(private fb: FormBuilder) {

        this.formGroup = this.fb.group({

            name: ['']

        });



        this.formGroup.valueChanges.subscribe(value => {

            console.log('Form value changed:', value);

        });

    }



    onSubmit() {

        console.log(this.formGroup.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se puede utilizar un `HttpInterceptor` para modificar solicitudes o respuestas HTTP globalmente.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const clonedReq = req.clone({

            setHeaders: {

                Authorization: `Bearer your-token`

            }

        });



        return next.handle(clonedReq);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los guardias de ruta se pueden utilizar para controlar el acceso a las rutas en función de determinadas condiciones.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

    providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private router: Router) {}



    canActivate(): boolean {

        const isLoggedIn = false; // Replace with actual login check

        if (!isLoggedIn) {

            this.router.navigate(['/login']);

            return false;

        }

        return true;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se pueden crear directivas personalizadas para ampliar los elementos HTML con un comportamiento adicional.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {}



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ChangeDetectorRef` le permite controlar manualmente la detección de cambios.

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



@Component({

    selector: 'app-manual-detection',

    template: `<p>{{ message }}</p>`,

})

export class ManualDetectionComponent {

    message = 'Initial message';



    constructor(private cdRef: ChangeDetectorRef) {}



    updateMessage() {

        this.message = 'Updated message';

        this.cdRef.detectChanges();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `EventEmitter` se utiliza para emitir eventos personalizados desde componentes secundarios a componentes principales.

import { Component, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="sendEvent()">Send Event</button>`,

})

export class ChildComponent {

    @Output() event = new EventEmitter<string>();



    sendEvent() {

        this.event.emit('Data from child');

    }

}



@Component({

    selector: 'app-parent',

    template: `

        <app-child (event)="handleEvent($event)"></app-child>

    `,

})

export class ParentComponent {

    handleEvent(message: string) {

        console.log(message);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de funciones le permiten organizar la funcionalidad de la aplicación en bloques coherentes.

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

import { CommonModule } from '@angular/common';

import { FeatureComponent } from './feature.component';



@NgModule({

    declarations: [FeatureComponent],

    imports: [CommonModule],

    exports: [FeatureComponent]

})

export class FeatureModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `NgZone` ayuda a controlar manualmente el proceso de detección de cambios de Angular.

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



@Component({

    selector: 'app-zone',

    template: `<p>{{ message }}</p>`,

})

export class ZoneComponent {

    message = 'Initial message';



    constructor(private ngZone: NgZone) {

        this.ngZone.runOutsideAngular(() => {

            setTimeout(() => {

                this.message = 'Updated message';

                this.ngZone.run(() => console.log('Change detected'));

            }, 1000);

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos DOM directamente en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event']) onClick(event: Event) {

        console.log('Element clicked:', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChildren` consulta varios elementos dentro de la vista de un componente.

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child><app-child></app-child>`,

})

export class ParentComponent implements AfterViewInit {

    @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;



    ngAfterViewInit() {

        this.children.forEach(child => console.log(child));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` se utiliza para responder a cambios en las propiedades de entrada.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';



@Component({

    selector: 'app-changes',

    template: `<p>{{ inputValue }}</p>`,

})

export class ChangesComponent implements OnChanges {

    @Input() inputValue: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se utiliza para la lógica de inicialización de componentes.

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



@Component({

    selector: 'app-init',

    template: `<p>Component initialized</p>`,

})

export class InitComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para limpiar recursos y cancelar la suscripción a observables.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-destroy',

    template: `<p>Component destroyed</p>`,

})

export class DestroyComponent implements OnDestroy {

    private subscription: Subscription;



    ngOnDestroy() {

        // Unsubscribe to avoid memory leaks

        if (this.subscription) {

            this.subscription.unsubscribe();

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional entre controles de formulario y propiedades de componentes.

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



@Component({

    selector: 'app-two-way-binding',

    template: `

        <input [(ngModel)]="value" />

        <p>Value: {{ value }}</p>

    `,

})

export class TwoWayBindingComponent {

    value: string = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` se utiliza para vincular una propiedad del elemento host a una propiedad de la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlight') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de la directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event']) onClick(event: Event) {

        console.log('Element clicked:', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` responde a cambios en las propiedades de entrada.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';



@Component({

    selector: 'app-changes',

    template: `<p>{{ inputValue }}</p>`,

})

export class ChangesComponent implements OnChanges {

    @Input() inputValue: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se utiliza para la lógica de inicialización de componentes.

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



@Component({

    selector: 'app-init',

    template: `<p>Component initialized</p>`,

})

export class InitComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngAfterViewInit` se utiliza después de que se hayan inicializado la vista del componente y las vistas secundarias.

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-view-init',

    template: `<div #myDiv>Content</div>`,

})

export class ViewInitComponent implements AfterViewInit {

    @ViewChild('myDiv') div: ElementRef;



    ngAfterViewInit() {

        console.log(this.div.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngAfterContentInit` se utiliza después de que Angular inicializa el contenido del componente.

import { Component, AfterContentInit, ContentChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-content-init',

    template: `<ng-content></ng-content>`,

})

export class ContentInitComponent implements AfterContentInit {

    @ContentChild('content') content: ElementRef;



    ngAfterContentInit() {

        console.log(this.content.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngAfterViewChecked` se usa después de que Angular verifica la vista del componente y las vistas secundarias.

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



@Component({

    selector: 'app-view-checked',

    template: `<p>Check view</p>`,

})

export class ViewCheckedComponent implements AfterViewChecked {

    ngAfterViewChecked() {

        console.log('View checked');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngAfterContentChecked` se utiliza después de que Angular verifica el contenido proyectado en el componente.

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



@Component({

    selector: 'app-content-checked',

    template: `<p>Check content</p>`,

})

export class ContentCheckedComponent implements AfterContentChecked {

    ngAfterContentChecked() {

        console.log('Content checked');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para realizar la limpieza justo antes de que Angular destruya el componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-destroy',

    template: `<p>Component destroyed</p>`,

})

export class DestroyComponent implements OnDestroy {

    private subscription: Subscription;



    ngOnDestroy() {

        // Unsubscribe to avoid memory leaks

        if (this.subscription) {

            this.subscription.unsubscribe();

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` permite pasar datos de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: `<p>{{ data }}</p>`,

})

export class ChildComponent {

    @Input() data: string;

}



@Component({

    selector: 'app-parent',

    template: `<app-child [data]="parentData"></app-child>`,

})

export class ParentComponent {

    parentData = 'Data from parent';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para emitir eventos de un componente secundario a un componente principal.

import { Component, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="sendData()">Send Data</button>`,

})

export class ChildComponent {

    @Output() dataEvent = new EventEmitter<string>();



    sendData() {

        this.dataEvent.emit('Data from child');

    }

}



@Component({

    selector: 'app-parent',

    template: `

        <app-child (dataEvent)="receiveData($event)"></app-child>

        <p>{{ receivedData }}</p>

    `,

})

export class ParentComponent {

    receivedData: string;



    receiveData(data: string) {

        this.receivedData = data;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` permite consultar un solo elemento o directiva desde la vista del componente.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';



@Component({

    selector: 'app-view-child',

    template: `<div #myDiv>Content</div>`,

})

export class ViewChildComponent implements AfterViewInit {

    @ViewChild('myDiv') div: ElementRef;



    ngAfterViewInit() {

        console.log(this.div.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Un módulo compartido le permite compartir funciones comunes entre varios módulos.

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

import { CommonModule } from '@angular/common';

import { SharedComponent } from './shared.component';



@NgModule({

    declarations: [SharedComponent],

    imports: [CommonModule],

    exports: [SharedComponent]

})

export class SharedModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La configuración de enrutamiento se realiza en el decorador `@NgModule` con el método `RouterModule.forRoot`.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent },

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ActivatedRoute` proporciona acceso a los parámetros de ruta de la ruta activa.

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

import { ActivatedRoute } from '@angular/router';



@Component({

    selector: 'app-route',

    template: `<p>Parameter: {{ param }}</p>`,

})

export class RouteComponent implements OnInit {

    param: string;



    constructor(private route: ActivatedRoute) {}



    ngOnInit() {

        this.route.paramMap.subscribe(params => {

            this.param = params.get('id');

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `RouterLink` se utiliza para vincular un enlace a una ruta en el enrutador Angular.

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



@Component({

    selector: 'app-navigation',

    template: `

        <a routerLink="/home">Home</a>

        <a routerLink="/about">About</a>

    `,

})

export class NavigationComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Router` le permite navegar mediante programación a diferentes rutas.

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

import { Router } from '@angular/router';



@Component({

    selector: 'app-navigation',

    template: `<button (click)="navigate()">Go to About</button>`,

})

export class NavigationComponent {

    constructor(private router: Router) {}



    navigate() {

        this.router.navigate(['/about']);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormControl` se utiliza para gestionar el valor y el estado de validación de las entradas del formulario.

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

import { FormControl } from '@angular/forms';



@Component({

    selector: 'app-form',

    template: `

        <input [formControl]="nameControl" />

        <p>Value: {{ nameControl.value }}</p>

    `,

})

export class FormComponent {

    nameControl = new FormControl('');

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormArray` se utiliza para administrar una serie de controles de formulario.

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

import { FormArray, FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-form-array',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i" />

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `,

})

export class FormArrayComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([this.fb.control('')])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos le permiten crear formularios con validación usando las clases `FormControl` y `FormGroup`.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="form" (ngSubmit)="onSubmit()">

            <input formControlName="name" placeholder="Name" />

            <div *ngIf="form.controls.name.invalid && form.controls.name.touched">

                Name is required

            </div>

            <button type="submit" [disabled]="form.invalid">Submit</button>

        </form>

    `,

})

export class ReactiveFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormBuilder` ayuda a crear formularios complejos con controles anidados.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-nested-form',

    template: `

        <form [formGroup]="form">

            <div formGroupName="address">

                <input formControlName="street" placeholder="Street" />

                <input formControlName="city" placeholder="City" />

            </div>

        </form>

    `,

})

export class NestedFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            address: this.fb.group({

                street: [''],

                city: ['']

            })

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puede crear validadores personalizados y usarlos con controles de formulario.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-custom-validation',

    template: `

        <form [formGroup]="form">

            <input formControlName="password" placeholder="Password" />

            <div *ngIf="form.controls.password.errors?.pattern">

                Password must contain at least one uppercase letter

            </div>

        </form>

    `,

})

export class CustomValidationComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            password: ['', [Validators.required, this.uppercaseValidator]]

        });

    }



    uppercaseValidator(control) {

        const hasUppercase = /[A-Z]/.test(control.value);

        return hasUppercase ? null : { pattern: true };

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los validadores asincrónicos se utilizan para realizar validaciones que requieren una solicitud HTTP u otras operaciones asincrónicas.

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

import { FormBuilder, FormGroup, AsyncValidatorFn, AbstractControl } from '@angular/forms';

import { Observable, de } from 'rxjs';

import { debounceTime, map, catchError } from 'rxjs/operators';



@Component({

    selector: 'app-async-validator',

    template: `

        <form [formGroup]="form">

            <input formControlName="username" placeholder="Username" />

            <div *ngIf="form.controls.username.errors?.taken">

                Username is taken

            </div>

        </form>

    `,

})

export class AsyncValidatorComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            username: ['', null, this.usernameValidator()]

        });

    }



    usernameValidator(): AsyncValidatorFn {

        return (control: AbstractControl): Observable<any> => {

            return of(control.value).pipe(

                debounceTime(300),

                map(value => value === 'admin' ? { taken: true } : null),

                catchError(() => of(null))

            );

        };

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` se utiliza para realizar solicitudes HTTP.

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

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



@Component({

    selector: 'app-http',

    template: `

        <p>Data: {{ data | json }}</p>

    `,

})

export class HttpComponent implements OnInit {

    data: any;



    constructor(private http: HttpClient) {}



    ngOnInit() {

        this.http.get('https://api.example.com/data').subscribe(response => {

            this.data = response;

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `HttpInterceptor` le permite interceptar y modificar solicitudes y respuestas HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const cloned = req.clone({

            setHeaders: {

                Authorization: 'Bearer my-token'

            }

        });

        return next.handle(cloned);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `HttpParams` se utiliza para crear parámetros de consulta para solicitudes HTTP.

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

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



@Component({

    selector: 'app-http-params',

    template: `

        <p>Data: {{ data | json }}</p>

    `,

})

export class HttpParamsComponent implements OnInit {

    data: any;



    constructor(private http: HttpClient) {}



    ngOnInit() {

        const params = new HttpParams().set('param1', 'value1').set('param2', 'value2');

        this.http.get('https://api.example.com/data', { params }).subscribe(response => {

            this.data = response;

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `NgModel` se utiliza para el enlace de datos bidireccional en formularios angulares.

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



@Component({

    selector: 'app-ng-model',

    template: `

        <input [(ngModel)]="name" placeholder="Name" />

        <p>Name: {{ name }}</p>

    `,

})

export class NgModelComponent {

    name: string = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las canalizaciones personalizadas le permiten transformar datos antes de mostrarlos en la plantilla.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos DOM en su componente o directiva.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appHover]'

})

export class HoverDirective {

    @HostListener('mouseenter') onMouseEnter() {

        console.log('Mouse entered');

    }



    @HostListener('mouseleave') onMouseLeave() {

        console.log('Mouse left');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` se utiliza para acceder a un único elemento secundario proyectado en un componente.

import { Component, ContentChild, AfterContentInit, ElementRef } from '@angular/core';



@Component({

    selector: 'app-content-child',

    template: `<ng-content></ng-content>`,

})

export class ContentChildComponent implements AfterContentInit {

    @ContentChild('content') content: ElementRef;



    ngAfterContentInit() {

        console.log(this.content.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ChangeDetectorRef` le permite activar manualmente la detección de cambios.

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



@Component({

    selector: 'app-detection',

    template: `

        <p>{{ message }}</p>

        <button (click)="updateMessage()">Update Message</button>

    `,

})

export class DetectionComponent {

    message: string = 'Initial Message';



    constructor(private cd: ChangeDetectorRef) {}



    updateMessage() {

        this.message = 'Updated Message';

        this.cd.detectChanges();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para crear un servicio que se puede inyectar en otros componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return ['Item1', 'Item2', 'Item3'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los proveedores se pueden configurar en el decorador `@NgModule` para que estén disponibles en toda la aplicación o módulo.

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

import { CommonModule } from '@angular/common';

import { DataService } from './data.service';



@NgModule({

    imports: [CommonModule],

    providers: [DataService]

})

export class SharedModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-content` se utiliza para proyectar contenido en la plantilla de un componente.

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



@Component({

    selector: 'app-content',

    template: `<ng-content></ng-content>`,

})

export class ContentComponent { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Inject` le permite especificar una dependencia que se inyectará en un componente o servicio.

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

import { DOCUMENT } from '@angular/common';



@Component({

    selector: 'app-doc',

    template: `<p>Document title: {{ title }}</p>`,

})

export class DocComponent {

    title: string;



    constructor(@Inject(DOCUMENT) private document: Document) {

        this.title = this.document.title;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` se utiliza para vincular propiedades al elemento host de una directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlighted') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Host` le permite inyectar una dependencia desde el elemento host.

import { Directive, Host } from '@angular/core';

import { DataService } from './data.service';



@Directive({

    selector: '[appHost]',

})

export class HostDirective {

    constructor(@Host() private dataService: DataService) {

        console.log(this.dataService.getData());

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se utiliza para realizar la lógica de inicialización después de que Angular haya inicializado las propiedades vinculadas a datos del componente.

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



@Component({

    selector: 'app-init',

    template: `<p>Component initialized</p>`,

})

export class InitComponent implements OnInit {

    ngOnInit() {

        console.log('Component initialized');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para realizar la limpieza justo antes de que Angular destruya el componente o directiva.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-destroy',

    template: `<p>Component is being destroyed</p>`,

})

export class DestroyComponent implements OnDestroy {

    private subscription: Subscription = new Subscription();



    ngOnDestroy() {

        this.subscription.unsubscribe();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` le permite acceder a un componente secundario o elemento dentro del componente principal.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';



@Component({

    selector: 'app-view-child',

    template: `<p #paragraph>Some text</p>`,

})

export class ViewChildComponent implements AfterViewInit {

    @ViewChild('paragraph') paragraph: ElementRef;



    ngAfterViewInit() {

        console.log(this.paragraph.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChildren` se utiliza para acceder a múltiples elementos secundarios proyectados en un componente.

import { Component, ContentChildren, QueryList, AfterContentInit, ElementRef } from '@angular/core';



@Component({

    selector: 'app-content-children',

    template: `<ng-content></ng-content>`,

})

export class ContentChildrenComponent implements AfterContentInit {

    @ContentChildren('content') contents: QueryList<ElementRef>;



    ngAfterContentInit() {

        this.contents.forEach(content => {

            console.log(content.nativeElement.textContent);

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` le permite responder a los cambios en las propiedades de entrada.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';



@Component({

    selector: 'app-changes',

    template: `<p>{{ value }}</p>`,

})

export class ChangesComponent implements OnChanges {

    @Input() value: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para iterar sobre matrices o colecciones en plantillas Angular.

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



@Component({

    selector: 'app-ng-for',

    template: `

        <ul>

            <li *ngFor="let item de items">{{ item }}</li>

        </ul>

    `,

})

export class NgForComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` incluye o excluye condicionalmente elementos del DOM.

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



@Component({

    selector: 'app-ng-if',

    template: `

        <div *ngIf="isVisible">This is visible</div>

    `,

})

export class NgIfComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` se utiliza para agregar o eliminar dinámicamente clases CSS basadas en expresiones.

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



@Component({

    selector: 'app-ng-class',

    template: `

        <div [ngClass]="{'active': isActive, 'inactive': !isActive}">

            Conditional classes

        </div>

    `,

})

export class NgClassComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` le permite aplicar estilos en línea condicionalmente basados en expresiones.

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



@Component({

    selector: 'app-ng-style',

    template: `

        <div [ngStyle]="{'color': color, 'font-size': fontSize}">

            Styled text

        </div>

    `,

})

export class NgStyleComponent {

    color = 'blue';

    fontSize = '20px';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Pipe` se utiliza para crear canalizaciones personalizadas para transformar datos en plantillas.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'uppercase'

})

export class UppercasePipe implements PipeTransform {

    transform(value: string): string {

        return value.toUpperCase();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional en formularios angulares.

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



@Component({

    selector: 'app-ng-model',

    template: `

        <input [(ngModel)]="name" placeholder="Name" />

        <p>Name: {{ name }}</p>

    `,

})

export class NgModelComponent {

    name: string = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos proporcionan una manera de manejar los envíos de formularios con más control sobre la validación y el estado.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="form" (ngSubmit)="onSubmit()">

            <input formControlName="name" placeholder="Name" />

            <button type="submit">Submit</button>

        </form>

    `,

})

export class ReactiveFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['']

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `FormBuilder` se utiliza para crear grupos de formularios en forma reactiva.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-form-builder',

    template: `

        <form [formGroup]="form">

            <input formControlName="email" placeholder="Email" />

        </form>

    `,

})

export class FormBuilderComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            email: ['']

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La interfaz `HttpInterceptor` le permite interceptar y modificar solicitudes y respuestas HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const authReq = req.clone({

            headers: req.headers.set('Authorization', 'Bearer my-token')

        });

        return next.handle(authReq);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` proporciona métodos para manejar errores utilizando operadores RxJS.

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

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

import { catchError } from 'rxjs/operators';

import { de } from 'rxjs';



@Component({

    selector: 'app-http-error',

    template: `<p>Check console for errors</p>`,

})

export class HttpErrorComponent {

    constructor(private http: HttpClient) {

        this.http.get('https://api.example.com/data')

            .pipe(catchError(error => {

                console.error('Error occurred:', error);

                return of([]);

            }))

            .subscribe(response => {

                console.log(response);

            });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Directive` se utiliza para crear directivas personalizadas que pueden manipular el DOM.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {}



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Renderer2` le permite interactuar con el DOM de forma segura.

import { Directive, Renderer2, ElementRef } from '@angular/core';



@Directive({

    selector: '[appColor]'

})

export class ColorDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {

        this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChildren` le permite consultar y acceder a múltiples elementos o componentes secundarios.

import { Component, ViewChildren, QueryList, AfterViewInit, ElementRef } from '@angular/core';



@Component({

    selector: 'app-view-children',

    template: `<div #item *ngFor="let i de items">{{ i }}</div>`,

})

export class ViewChildrenComponent implements AfterViewInit {

    @ViewChildren('item') items: QueryList<ElementRef>;



    ngAfterViewInit() {

        this.items.forEach(item => {

            console.log(item.nativeElement.textContent);

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de funciones se crean utilizando el decorador `@NgModule` para agrupar componentes, directivas y servicios relacionados.

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

import { CommonModule } from '@angular/common';

import { FeatureComponent } from './feature.component';



@NgModule({

    imports: [CommonModule],

    declarations: [FeatureComponent],

    exports: [FeatureComponent]

})

export class FeatureModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `RouterModule` se utiliza para configurar rutas y navegación en una aplicación Angular.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';



const routes: Routes = [

    { path: 'home', component: HomeComponent },

    { path: 'about', component: AboutComponent },

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ActivatedRoute` le permite acceder a los parámetros de ruta en su componente.

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

import { ActivatedRoute } from '@angular/router';



@Component({

    selector: 'app-route-params',

    template: `<p>Route ID: {{ id }}</p>`,

})

export class RouteParamsComponent implements OnInit {

    id: string;



    constructor(private route: ActivatedRoute) {}



    ngOnInit() {

        this.route.paramMap.subscribe(params => {

            this.id = params.get('id');

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` puede enviar solicitudes POST con datos JSON utilizando el método `post`.

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

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



@Component({

    selector: 'app-post-request',

    template: `<p>Check console for response</p>`,

})

export class PostRequestComponent {

    constructor(private http: HttpClient) {

        this.http.post('https://api.example.com/data', { key: 'value' })

            .subscribe(response => {

                console.log(response);

            });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormArray` le permite administrar una serie de controles de formulario en forma reactiva.

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

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';



@Component({

    selector: 'app-form-array',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i" />

                </div>

            </div>

        </form>

    `,

})

export class FormArrayComponent {

    form: FormGroup;



    get items() {

        return this.form.get('items') as FormArray;

    }



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array(['', '', ''])

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `HttpParams` se utiliza para construir parámetros de consulta para una solicitud HTTP.

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

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



@Component({

    selector: 'app-http-params',

    template: `<p>Check console for response</p>`,

})

export class HttpParamsComponent {

    constructor(private http: HttpClient) {

        const params = new HttpParams().set('param1', 'value1').set('param2', 'value2');

        this.http.get('https://api.example.com/data', { params })

            .subscribe(response => {

                console.log(response);

            });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` le permite vincular propiedades del elemento host en una directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlighted') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host en una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appHover]'

})

export class HoverDirective {

    @HostListener('mouseenter') onMouseEnter() {

        console.log('Mouse entered');

    }



    @HostListener('mouseleave') onMouseLeave() {

        console.log('Mouse left');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Inject` se utiliza para especificar una dependencia que se inyectará en un servicio o componente.

import { Injectable, Inject } from '@angular/core';

import { MyService } from './my-service.service';



@Injectable({

    providedIn: 'root'

})

export class MyComponentService {

    constructor(@Inject(MyService) private myService: MyService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Optional` le permite especificar que una dependencia es opcional.

import { Injectable, Optional } from '@angular/core';

import { OptionalService } from './optional.service';



@Injectable({

    providedIn: 'root'

})

export class MyService {

    constructor(@Optional() private optionalService?: OptionalService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Self` garantiza que una dependencia se resuelva desde el mismo inyector, no desde los inyectores principales.

import { Injectable, Self } from '@angular/core';

import { MyService } from './my-service.service';



@Injectable({

    providedIn: 'root'

})

export class AnotherService {

    constructor(@Self() private myService: MyService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Attribute` le permite acceder al valor de un atributo en el elemento host.

import { Directive, Attribute } from '@angular/core';



@Directive({

    selector: '[appAttribute]'

})

export class AttributeDirective {

    constructor(@Attribute('data-attribute') private dataAttribute: string) {

        console.log(dataAttribute);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` se utiliza para declarar e importar módulos en una aplicación Angular.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La matriz `proveedores` en `@NgModule` le permite especificar los servicios que estarán disponibles a nivel de módulo.

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

import { AppComponent } from './app.component';

import { MyService } from './my-service.service';



@NgModule({

    declarations: [AppComponent],

    imports: [],

    providers: [MyService],

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Pipe` se utiliza para crear canalizaciones personalizadas que pueden transformar datos en plantillas.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para definir un servicio que se puede inyectar en otros componentes o servicios.

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



@Injectable({

    providedIn: 'root'

})

export class MyService {

    constructor() {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Component` se utiliza para definir un componente reutilizable en Angular.

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



@Component({

    selector: 'app-reusable',

    template: `<p>This is a reusable component</p>`,

})

export class ReusableComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` le permite acceder y manipular un componente secundario o elemento DOM.

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`,

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent) child: ChildComponent;



    ngAfterViewInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` le permite acceder y manipular el contenido proyectado en un componente.

import { Component, ContentChild, AfterContentInit, ElementRef } from '@angular/core';



@Component({

    selector: 'app-content',

    template: `<ng-content></ng-content>`,

})

export class ContentComponent implements AfterContentInit {

    @ContentChild('content') content: ElementRef;



    ngAfterContentInit() {

        console.log(this.content.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La matriz `exports` en `@NgModule` le permite especificar qué componentes, directivas y canalizaciones deben estar disponibles para otros módulos.

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

import { CommonModule } from '@angular/common';

import { SharedComponent } from './shared.component';



@NgModule({

    imports: [CommonModule],

    declarations: [SharedComponent],

    exports: [SharedComponent]

})

export class SharedModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Inject` le permite proporcionar un valor de token específico para la inyección de dependencia.

import { Injectable, Inject, InjectionToken } from '@angular/core';



export const API_URL = new InjectionToken<string>('apiUrl');



@Injectable({

    providedIn: 'root'

})

export class ApiService {

    constructor(@Inject(API_URL) private apiUrl: string) {

        console.log(apiUrl);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Directive` se utiliza para crear una directiva estructural que puede cambiar el diseño del DOM.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';



@Directive({

    selector: '[appIf]'

})

export class IfDirective {

    constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}



    @Input() set appIf(condition: boolean) {

        if (condition) {

            this.viewContainer.createEmbeddedView(this.templateRef);

        } else {

            this.viewContainer.clear();

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los métodos `forRoot` y `forChild` se utilizan para configurar proveedores para módulos raíz y de funciones, respectivamente.

import { NgModule, ModuleWithProviders } from '@angular/core';

import { CommonModule } from '@angular/common';

import { MyService } from './my-service.service';



@NgModule({

    imports: [CommonModule],

    declarations: [],

    exports: []

})

export class FeatureModule {

    static forRoot(): ModuleWithProviders<FeatureModule> {

        return {

            ngModule: FeatureModule,

            providers: [MyService]

        };

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `BehaviorSubject` se utiliza para gestionar el estado en Angular. Mantiene el valor actual y lo emite a nuevos suscriptores.

import { BehaviorSubject } from 'rxjs';



export class StateService {

    private stateSubject = new BehaviorSubject<number>(0);

    state$ = this.stateSubject.asObservable();



    updateState(value: number) {

        this.stateSubject.next(value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La estrategia `OnPush` mejora el rendimiento al verificar solo los cambios cuando cambian las propiedades de entrada o cuando ocurre un evento.

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



@Component({

    selector: 'app-onpush',

    template: `<p>OnPush change detection</p>`,

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class OnPushComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewEncapsulation` se utiliza para controlar cómo se aplican los estilos a los componentes.

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



@Component({

    selector: 'app-encapsulation',

    template: `<p>ViewEncapsulation example</p>`,

    styles: [`p { color: red; }`],

    encapsulation: ViewEncapsulation.None

})

export class EncapsulationComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los guardias de ruta controlan el acceso a las rutas según las condiciones.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

    providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private router: Router) {}



    canActivate(): boolean {

        const isAuthenticated = false; // Replace with real authentication logic

        if (isAuthenticated) {

            return true;

        } else {

            this.router.navigate(['/login']);

            return false;

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las canalizaciones personalizadas pueden transformar datos según los argumentos proporcionados.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'multiply'

})

export class MultiplyPipe implements PipeTransform {

    transform(value: number, multiplier: number): number {

        return value * multiplier;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `FormBuilder` se puede utilizar para crear formularios complejos con grupos de formularios anidados.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-nested-form',

    template: `

        <form [formGroup]="form">

            <div formGroupName="personalInfo">

                <input formControlName="name" placeholder="Name">

                <input formControlName="age" placeholder="Age">

            </div>

            <div formGroupName="address">

                <input formControlName="street" placeholder="Street">

                <input formControlName="city" placeholder="City">

            </div>

        </form>

    `,

})

export class NestedFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            personalInfo: this.fb.group({

                name: [''],

                age: ['']

            }),

            address: this.fb.group({

                street: [''],

                city: ['']

            })

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de carga diferida se pueden configurar en `@NgModule` usando la propiedad `loadChildren` en las rutas.

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

import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [

    { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Proporcionar un servicio en `@NgModule` garantiza que sea un producto único en toda la aplicación.

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

import { AppComponent } from './app.component';

import { MyService } from './my-service.service';



@NgModule({

    declarations: [AppComponent],

    imports: [],

    providers: [MyService], // Singleton service

    bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `HttpInterceptor` le permite interceptar y modificar solicitudes y respuestas HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const clonedRequest = req.clone({

            headers: req.headers.set('Authorization', 'Bearer token')

        });

        return next.handle(clonedRequest);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ChangeDetectorRef` le permite activar manualmente la detección de cambios en sus componentes.

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



@Component({

    selector: 'app-manual-detect',

    template: `<p>Manual change detection</p>`,

})

export class ManualDetectComponent {

    constructor(private cdr: ChangeDetectorRef) {}



    triggerChangeDetection() {

        this.cdr.detectChanges();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Renderer2` proporciona métodos para manipular el DOM de forma independiente de la plataforma.

import { Directive, Renderer2, ElementRef } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private renderer: Renderer2, private el: ElementRef) {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `NgFor` se utiliza para recorrer una serie de objetos en la plantilla.

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



@Component({

    selector: 'app-item-list',

    template: `

        <ul>

            <li *ngFor="let item de items">{{ item.name }}</li>

        </ul>

    `,

})

export class ItemListComponent {

    items = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `NgIf` le permite incluir o excluir elementos del DOM de forma condicional.

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



@Component({

    selector: 'app-conditional',

    template: `

        <p *ngIf="isVisible">This element is conditionally rendered</p>

    `,

})

export class ConditionalComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormArray` le permite administrar una lista dinámica de controles de formulario.

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

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-dynamic-form',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i" placeholder="Item {{i + 1}}">

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `,

})

export class DynamicFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos DOM directamente en su componente.

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



@Component({

    selector: 'app-host-listener',

    template: `<p>HostListener example</p>`,

})

export class HostListenerComponent {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Element clicked!', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` se utiliza para responder a cambios en las propiedades de entrada.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-changes',

    template: `<p>ngOnChanges example</p>`,

})

export class ChangesComponent implements OnChanges {

    @Input() data: string;



    ngOnChanges(changes: SimpleChanges) {

        console.log('Changes detected:', changes);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnInit` se utiliza para realizar tareas de inicialización del componente.

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



@Component({

    selector: 'app-init',

    template: `<p>ngOnInit example</p>`,

})

export class InitComponent implements OnInit {

    data: string;



    ngOnInit() {

        this.data = 'Initialized data';

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnDestroy` se utiliza para realizar tareas de limpieza antes de que se destruya el componente.

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

import { Subscription } from 'rxjs';



@Component({

    selector: 'app-destroy',

    template: `<p>ngOnDestroy example</p>`,

})

export class DestroyComponent implements OnDestroy {

    private subscription: Subscription;



    ngOnDestroy() {

        if (this.subscription) {

            this.subscription.unsubscribe();

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` permite que un componente secundario reciba datos de un padre, mientras que `@Output` permite que el niño emita eventos al padre.

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `

        <button (click)="sendMessage()">Send Message</button>

    `,

})

export class ChildComponent {

    @Input() message: string;

    @Output() messageEvent = new EventEmitter<string>();



    sendMessage() {

        this.messageEvent.emit('Message from child');

    }

}



@Component({

    selector: 'app-parent',

    template: `

        <app-child [message]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>

        <p>Received Message: {{ receivedMessage }}</p>

    `,

})

export class ParentComponent {

    parentMessage = 'Message from parent';

    receivedMessage: string;



    receiveMessage(message: string) {

        this.receivedMessage = message;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` le permite mostrar elementos condicionalmente según un valor.

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



@Component({

    selector: 'app-switch',

    template: `

        <div [ngSwitch]="value">

            <p *ngSwitchCase="'A'">Value is A</p>

            <p *ngSwitchCase="'B'">Value is B</p>

            <p *ngSwitchDefault>Default value</p>

        </div>

    `,

})

export class SwitchComponent {

    value = 'A';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para marcar una clase como un servicio que se puede inyectar. Puede especificar el proveedor en `@NgModule` o directamente en el componente.

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



@Injectable({

    providedIn: 'root' // Singleton service provided at the root level

})

export class MyService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` se utiliza para acceder a un componente secundario o directiva que se proyecta en un espacio de contenido.

import { Component, ContentChild, AfterContentInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<ng-content></ng-content>`

})

export class ParentComponent implements AfterContentInit {

    @ContentChild(ChildComponent) child: ChildComponent;



    ngAfterContentInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para acceder a un componente secundario o directiva dentro de la vista.

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child>`

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent) child: ChildComponent;



    ngAfterViewInit() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional con controles de formulario.

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



@Component({

    selector: 'app-model',

    template: `<input [(ngModel)]="value" placeholder="Enter value"> <p>{{ value }}</p>`

})

export class ModelComponent {

    value: string = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`AsyncPipe` se suscribe a un observable o promesa y devuelve el último valor que ha emitido.

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

import { Observable, de } from 'rxjs';



@Component({

    selector: 'app-async',

    template: `<p>{{ data$ | async }}</p>`

})

export class AsyncComponent {

    data$: Observable<string> = of('Hello World');

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite agregar o eliminar dinámicamente clases CSS según el estado del componente.

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



@Component({

    selector: 'app-class',

    template: `<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Dynamic Class</div>`

})

export class ClassComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` le permite establecer dinámicamente estilos en línea en un elemento.

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



@Component({

    selector: 'app-style',

    template: `<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled Text</div>`

})

export class StyleComponent {

    color = 'blue';

    fontSize = '20px';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La función `trackBy` ayuda a Angular a optimizar la representación mediante el seguimiento de elementos en una lista.

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



@Component({

    selector: 'app-trackby',

    template: `

        <ul>

            <li *ngFor="let item de items; trackBy: trackByFn">{{ item.name }}</li>

        </ul>

    `

})

export class TrackByComponent {

    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];



    trackByFn(index: number, item: any) {

        return item.id;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se puede usar con `else` para mostrar contenido alternativo según una condición.

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



@Component({

    selector: 'app-if-else',

    template: `

        <div *ngIf="isVisible; else notVisible">Visible Content</div>

        <ng-template #notVisible>Not Visible Content</ng-template>

    `

})

export class IfElseComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` le permite vincular propiedades al elemento host de la directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('class.highlight') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de la directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Host element clicked!', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` se utiliza para realizar solicitudes HTTP y manejar respuestas.

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

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

import { Observable } from 'rxjs';



@Component({

    selector: 'app-http',

    template: `<p>Data: {{ data$ | async }}</p>`

})

export class HttpComponent {

    data$: Observable<any>;



    constructor(private http: HttpClient) {

        this.data$ = this.http.get('https://api.example.com/data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `HttpInterceptor` le permite interceptar y modificar solicitudes y respuestas HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const clonedRequest = req.clone({

            setHeaders: { Authorization: 'Bearer token' }

        });

        return next.handle(clonedRequest);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Router` se utiliza para navegar entre rutas mediante programación.

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

import { Router } from '@angular/router';



@Component({

    selector: 'app-navigate',

    template: `<button (click)="goToPage()">Go to Page</button>`

})

export class NavigateComponent {

    constructor(private router: Router) {}



    goToPage() {

        this.router.navigate(['/page']);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ActivatedRoute` le permite acceder a parámetros de ruta y parámetros de consulta.

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

import { ActivatedRoute } from '@angular/router';



@Component({

    selector: 'app-route',

    template: `<p>Param: {{ param }}</p>`

})

export class RouteComponent implements OnInit {

    param: string;



    constructor(private route: ActivatedRoute) {}



    ngOnInit() {

        this.route.params.subscribe(params => {

            this.param = params['id'];

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los guardias de ruta se utilizan para proteger rutas en función de determinadas condiciones.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({ providedIn: 'root' })

export class AuthGuard implements CanActivate {

    constructor(private router: Router) {}



    canActivate(): boolean {

        const isAuthenticated = false; // Check authentication

        if (!isAuthenticated) {

            this.router.navigate(['/login']);

            return false;

        }

        return true;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `RouterOutlet` se utiliza para mostrar componentes enrutados según la ruta activa.

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

import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';

import { HomeComponent } from './home.component';



const routes: Routes = [

    { path: '', component: HomeComponent }

];



@NgModule({



    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}



@Component({

    selector: 'app-root',

    template: `<router-outlet></router-outlet>`

})

export class AppComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La inyección de dependencia se utiliza para inyectar servicios en componentes u otros servicios.

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



@Injectable({

    providedIn: 'root'

})

export class MyService {}



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

import { MyService } from './my.service';



@Component({

    selector: 'app-example',

    template: `<p>Service injected</p>`

})

export class ExampleComponent {

    constructor(private myService: MyService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las canalizaciones personalizadas se utilizan para transformar datos antes de mostrarlos en la plantilla.

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

    name: 'reverse'

})

export class ReversePipe implements PipeTransform {

    transform(value: string): string {

        return value.split('').reverse().join('');

    }

}



@Component({

    selector: 'app-pipe',

    template: `<p>{{ 'Angular' | reverse }}</p>`

})

export class PipeComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ChangeDetectionStrategy` se utiliza para controlar cómo Angular busca cambios en un componente.

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



@Component({

    selector: 'app-detection',

    template: `<p>Change Detection Strategy</p>`,

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class DetectionComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Inject` se usa para especificar un proveedor para inyectar en un constructor cuando la dependencia no es directamente inyectable.

import { Injectable, Inject } from '@angular/core';

import { DOCUMENT } from '@angular/common';



@Injectable({

    providedIn: 'root'

})

export class DocumentService {

    constructor(@Inject(DOCUMENT) private document: Document) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Component` se utiliza para definir metadatos para un componente, como su selector, plantilla y estilos.

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



@Component({

    selector: 'app-example',

    templateUrl: './example.component.html',

    styleUrls: ['./example.component.css']

})

export class ExampleComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` define un módulo Angular proporcionando metadatos, como declaraciones, importaciones y proveedores.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';



@NgModule({

    declarations: [AppComponent],

    imports: [BrowserModule],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ReactiveFormsModule` proporciona capacidades de formulario reactivo en Angular, lo que le permite crear y administrar formularios mediante programación.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="form">

            <label for="name">Name:</label>

            <input id="name" formControlName="name">

            <button (click)="submit()">Submit</button>

        </form>

    `

})

export class ReactiveFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: ['']

        });

    }



    submit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormsModule` proporciona soporte para formularios basados en plantillas en Angular, lo que le permite crear formularios de forma declarativa.

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



@Component({

    selector: 'app-template-form',

    template: `

        <form #form="ngForm" (ngSubmit)="submit(form)">

            <label for="name">Name:</label>

            <input id="name" name="name" ngModel>

            <button type="submit">Submit</button>

        </form>

    `

})

export class TemplateFormComponent {

    submit(form: any) {

        console.log(form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los interceptores se pueden utilizar con `HttpClient` para registrar solicitudes y respuestas HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class LoggingInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        console.log('Request made:', req);

        return next.handle(req);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` permite que un componente secundario emita eventos a un componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="notify()">Notify</button>`

})

export class ChildComponent {

    @Output() notifyEvent = new EventEmitter<void>();



    notify() {

        this.notifyEvent.emit();

    }

}



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



@Component({

    selector: 'app-parent',

    template: `<app-child (notifyEvent)="onNotify()"></app-child>`

})

export class ParentComponent {

    onNotify() {

        console.log('Notification received!');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-template` le permite definir plantillas reutilizables que se pueden usar con directivas estructurales.

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



@Component({

    selector: 'app-template',

    template: `

        <ng-template #template let-name="name">

            </ng-template><ng-template #template let-name="name"><p>Hello, {{ name }}!</p>

        </ng-template>

        <ng-container *ngTemplateOutlet="template; context: { name: 'Angular' }"></ng-container>

    `

})

export class TemplateComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-content` se utiliza para proyectar contenido de un componente principal a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: `<ng-content></ng-content>`

})

export class ChildComponent {}



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



@Component({

    selector: 'app-parent',

    template: `<app-child></app-child><app-child><p>Projected Content</p></app-child>`

})

export class ParentComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ComponentFactoryResolver` le permite crear componentes dinámicamente en tiempo de ejecución.

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

import { DynamicComponent } from './dynamic.component';



@Component({

    selector: 'app-dynamic-loader',

    template: `<ng-template #container></ng-template>`

})

export class DynamicLoaderComponent {

    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;



    constructor(private resolver: ComponentFactoryResolver) {}



    loadComponent() {

        const factory = this.resolver.resolveComponentFactory(DynamicComponent);

        this.container.createComponent(factory);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormArray` se utiliza para administrar una colección de controles de formulario, que se pueden agregar o eliminar dinámicamente.

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

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';



@Component({

    selector: 'app-dynamic-form',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i">

                    <button (click)="removeItem(i)">Remove</button>

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `

})

export class DynamicFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }



    removeItem(index: number) {

        this.items.removeAt(index);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ChangeDetectorRef` se utiliza para activar manualmente la detección de cambios en Angular.

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



@Component({

    selector: 'app-manual-detection',

    template: `<p>Manual Change Detection</p>`

})

export class ManualDetectionComponent {

    constructor(private cdr: ChangeDetectorRef) {}



    detectChanges() {

        this.cdr.detectChanges();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos DOM en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Element clicked!', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` le permite acceder a componentes secundarios, directivas o elementos DOM desde el componente principal.

import { Component, ViewChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-parent',

    template: `<button (click)="clickChild()">Click Child</button><app-child #child></app-child>`

})

export class ParentComponent {

    @ViewChild('child') child: ElementRef;



    clickChild() {

        console.log(this.child);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` le permite acceder al contenido proyectado en un componente usando `ng-content`.

import { Component, ContentChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-content',

    template: `<ng-content></ng-content>`

})

export class ContentComponent {

    @ContentChild('projectedContent') content: ElementRef;



    ngAfterContentInit() {

        console.log(this.content.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `NgZone` le permite ejecutar código dentro o fuera de la zona de Angular, lo que afecta la detección de cambios.

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



@Component({

    selector: 'app-zone',

    template: `<p>NgZone Example</p>`

})

export class ZoneComponent {

    constructor(private ngZone: NgZone) {}



    runOutsideAngular() {

        this.ngZone.runOutsideAngular(() => {

            console.log('Running outside Angular zone');

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La enumeración `ViewEncapsulation` controla cómo se aplican los estilos a los componentes.

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



@Component({

    selector: 'app-encapsulation',

    template: `<p>View Encapsulation Example</p>`,

    styles: [`p { color: blue; }`],

    encapsulation: ViewEncapsulation.Emulated

})

export class EncapsulationComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de carga diferida se configuran usando `NgModule` y el método `RouterModule.forRoot` con la propiedad `loadChildren`.

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

import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [

    { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La estrategia `ChangeDetectionStrategy.OnPush` optimiza el rendimiento al verificar cambios solo cuando las propiedades de entrada cambian o ocurren eventos.

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



@Component({

    selector: 'app-performance',

    template: `<p>OnPush Change Detection</p>`,

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class PerformanceComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-container` le permite renderizar elementos condicionalmente sin agregar nodos DOM adicionales.

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



@Component({

    selector: 'app-container',

    template: `

        <ng-container *ngIf="isVisible">

            </ng-container><ng-container *ngIf="isVisible"><p>Conditionally Rendered Content</p>

        </ng-container>

    `

})

export class ContainerComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` marca una clase como un servicio que se puede inyectar en otras clases.

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    getData() {

        return ['Data 1', 'Data 2', 'Data 3'];

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` incluye condicionalmente una plantilla basada en el valor de una expresión.

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



@Component({

    selector: 'app-condition',

    template: `

        <div *ngIf="isVisible">This content is visible</div>

    `

})

export class ConditionComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para iterar sobre una lista de elementos y representarlos en la plantilla.

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



@Component({

    selector: 'app-list',

    template: `

        <ul>

            <li *ngFor="let item de items">{{ item }}</li>

        </ul>

    `

})

export class ListComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` le permite mostrar diferentes plantillas según un valor.

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



@Component({

    selector: 'app-switch',

    template: `

        <div [ngSwitch]="color">

            <div *ngSwitchCase="'red'">Red color</div>

            <div *ngSwitchCase="'blue'">Blue color</div>

            <div *ngSwitchDefault>Default color</div>

        </div>

    `

})

export class SwitchComponent {

    color = 'blue';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` se utiliza para obtener una referencia a un componente o elemento secundario en la plantilla.

import { Component, ViewChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-view-child',

    template: `<p #paragraph>Child Paragraph</p>`

})

export class ViewChildComponent {

    @ViewChild('paragraph') paragraph: ElementRef;



    ngAfterViewInit() {

        console.log(this.paragraph.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` le permite aplicar estilos dinámicos a un elemento basándose en una expresión.

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



@Component({

    selector: 'app-style',

    template: `

        <div [ngStyle]="{ 'color': color, 'font-size.px': fontSize }">

            Styled Text

        </div>

    `

})

export class StyleComponent {

    color = 'red';

    fontSize = 20;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite aplicar condicionalmente una o más clases CSS a un elemento.

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



@Component({

    selector: 'app-class',

    template: `

        <div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">

            Conditional Classes

        </div>

    `

})

export class ClassComponent {

    isActive = true;

    isDisabled = false;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` permite que un componente secundario reciba datos de su componente principal.

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



@Component({

    selector: 'app-child',

    template: `<p>Received: {{ data }}</p>`

})

export class ChildComponent {

    @Input() data: string;

}



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



@Component({

    selector: 'app-parent',

    template: `<app-child [data]="parentData"></app-child>`

})

export class ParentComponent {

    parentData = 'Data from parent';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` le permite vincular propiedades al elemento host de una directiva o componente.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('style.backgroundColor') backgroundColor = 'yellow';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` le permite escuchar eventos en el elemento host de una directiva o componente.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: Event) {

        console.log('Element clicked:', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Router` se utiliza para navegar entre diferentes rutas en una aplicación Angular.

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

import { Router } from '@angular/router';



@Component({

    selector: 'app-navigation',

    template: `<button (click)="navigate()">Go to Details</button>`

})

export class NavigationComponent {

    constructor(private router: Router) {}



    navigate() {

        this.router.navigate(['/details']);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ActivatedRoute` se utiliza para acceder a los parámetros de ruta y otra información sobre la ruta actual.

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

import { ActivatedRoute } from '@angular/router';



@Component({

    selector: 'app-details',

    template: `<p>Item ID: {{ itemId }}</p>`

})

export class DetailsComponent implements OnInit {

    itemId: string;



    constructor(private route: ActivatedRoute) {}



    ngOnInit() {

        this.itemId = this.route.snapshot.paramMap.get('id');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `RouterModule` se utiliza para configurar rutas de aplicaciones utilizando el método `RouterModule.forRoot`.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La guardia `CanActivate` se utiliza para controlar el acceso a rutas según las condiciones.

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

    providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private router: Router) {}



    canActivate(): boolean {

        const isAuthenticated = false; // Example condition

        if (!isAuthenticated) {

            this.router.navigate(['/login']);

            return false;

        }

        return true;

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` se utiliza para realizar solicitudes HTTP y manejar respuestas.

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

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



@Injectable({

    providedIn: 'root'

})

export class DataService {

    constructor(private http: HttpClient) {}



    getData() {

        return this.http.get('https://api.example.com/data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La interfaz `HttpInterceptor` le permite interceptar y modificar solicitudes y respuestas HTTP.

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const authReq = req.clone({ setHeaders: { Authorization: 'Bearer token' } });

        return next.handle(authReq);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `FormBuilder` simplifica la creación de formularios reactivos.

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="form">

            <input formControlName="name">

            <input formControlName="email">

        </form>

    `

})

export class ReactiveFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            name: [''],

            email: ['']

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`FormArray` le permite administrar una colección de controles de formulario.

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

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';



@Component({

    selector: 'app-dynamic-form',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i">

                    <button (click)="removeItem(i)">Remove</button>

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `

})

export class DynamicFormComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }



    removeItem(index: number) {

        this.items.removeAt(index);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngOnChanges` responde a cambios en las propiedades de entrada.

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

    selector: 'app-changes',

    template: `<p>Previous: {{ prevValue }}, Current: {{ currentValue }}</p>`

})

export class ChangesComponent implements OnChanges {

    @Input() value: string;

    prevValue: string;

    currentValue: string;



    ngOnChanges(changes: SimpleChanges) {

        if (changes.value) {

            this.prevValue = changes.value.previousValue;

            this.currentValue = changes.value.currentValue;

        }

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El gancho del ciclo de vida `ngAfterViewInit` se utiliza para realizar acciones después de que se hayan inicializado la vista y las vistas secundarias.

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';



@Component({

    selector: 'app-after-view',

    template: `<p #paragraph>View Initialized</p>`

})

export class AfterViewComponent implements AfterViewInit {

    @ViewChild('paragraph') paragraph: ElementRef;



    ngAfterViewInit() {

        console.log(this.paragraph.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-content` le permite proyectar contenido en la vista de un componente.

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



@Component({

    selector: 'app-card',

    template: `

        <div class="card">

            <ng-content></ng-content>

        </div>

    `

})

export class CardComponent {}

            

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



@Component({

    selector: 'app-root',

    template: `

        <app-card>

            </app-card><app-card><h1>Card Title</h1>

            <p>Card content goes here.</p>

        </app-card>

    `

})

export class AppComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ng-template` define plantillas reutilizables de las que se pueden crear instancias más adelante.

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



@Component({

    selector: 'app-template',

    template: `

        <ng-template #myTemplate>

            </ng-template><ng-template #myTemplate><p>This is a reusable template.</p>

        </ng-template>

        <ng-container *ngTemplateOutlet="myTemplate"></ng-container>

    `

})

export class TemplateComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ChangeDetectionStrategy` se puede configurar en `OnPush` para optimizar el rendimiento de la detección de cambios.

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



@Component({

    selector: 'app-optimized',

    template: `<p>Optimized Change Detection</p>`,

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class OptimizedComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Renderer2` se utiliza para manipular de forma segura elementos DOM sin acceso directo.

import { Component, ElementRef, Renderer2 } from '@angular/core';



@Component({

    selector: 'app-renderer',

    template: `<p #paragraph>Text</p>`

})

export class RendererComponent {

    constructor(private renderer: Renderer2, private el: ElementRef) {}



    ngAfterViewInit() {

        const paragraph = this.el.nativeElement.querySelector('p');

        this.renderer.setStyle(paragraph, 'color', 'blue');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Directive` se utiliza para crear directivas personalizadas que pueden modificar el comportamiento de los elementos.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) {}



    @HostListener('mouseenter') onMouseEnter() {

        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

    }



    @HostListener('mouseleave') onMouseLeave() {

        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@NgModule` define un módulo y sus componentes, directivas y servicios.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FeatureComponent } from './feature/feature.component';



@NgModule({

    declarations: [

        AppComponent,

        FeatureComponent

    ],

    imports: [

        BrowserModule

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La inyección de dependencia le permite proporcionar e inyectar servicios en componentes u otros servicios.

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



@Injectable({

    providedIn: 'root'

})

export class AuthService {

    login() {

        console.log('User logged in');

    }

}



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

import { AuthService } from './auth.service';



@Component({

    selector: 'app-login',

    template: `<button (click)="login()">Login</button>`

})

export class LoginComponent {

    constructor(private authService: AuthService) {}



    login() {

        this.authService.login();

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `Observable` se usa para manejar flujos de datos asincrónicos y a menudo se usa con `HttpClient` de Angular.

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

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

import { Observable } from 'rxjs';



@Component({

    selector: 'app-data',

    template: `<p>{{ data | json }}</p>`

})

export class DataComponent implements OnInit {

    data: any;



    constructor(private http: HttpClient) {}



    ngOnInit() {

        this.getData().subscribe(response => this.data = response);

    }



    getData(): Observable<any> {

        return this.http.get('https://api.example.com/data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los operadores RxJS se utilizan para transformar y manipular flujos de datos.

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

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

import { map } from 'rxjs/operators';



@Component({

    selector: 'app-transformed-data',

    template: `<p>{{ data | json }}</p>`

})

export class TransformedDataComponent implements OnInit {

    data: any;



    constructor(private http: HttpClient) {}



    ngOnInit() {

        this.getData().pipe(

            map(response => response.items)

        ).subscribe(items => this.data = items);

    }



    getData() {

        return this.http.get<any>('https://api.example.com/data');

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` y `EventEmitter` se utilizan para emitir eventos desde un componente secundario a su componente principal.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="notify()">Notify</button>`

})

export class ChildComponent {

    @Output() notifyEvent = new EventEmitter<string>();



    notify() {

        this.notifyEvent.emit('Event from child');

    }

}



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



@Component({

    selector: 'app-parent',

    template: `<app-child (notifyEvent)="handleNotification($event)"></app-child>`

})

export class ParentComponent {

    handleNotification(message: string) {

        console.log(message);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostBinding` le permite vincular propiedades del elemento host.

import { Directive, HostBinding } from '@angular/core';



@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    @HostBinding('style.backgroundColor') backgroundColor: string = 'yellow';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@HostListener` escucha eventos en el elemento host.

import { Directive, HostListener } from '@angular/core';



@Directive({

    selector: '[appClickTracker]'

})

export class ClickTrackerDirective {

    @HostListener('click', ['$event'])

    onClick(event: MouseEvent) {

        console.log('Element clicked:', event);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se utiliza para recorrer una colección y representar cada elemento.

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



@Component({

    selector: 'app-list',

    template: `

        <ul>

            <li *ngFor="let item de items">{{ item }}</li>

        </ul>

    `

})

export class ListComponent {

    items: string[] = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se utiliza para incluir o excluir condicionalmente elementos basados en una expresión.

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



@Component({

    selector: 'app-conditional',

    template: `

        <p *ngIf="isVisible">This text is visible</p>

    `

})

export class ConditionalComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` le permite mostrar elementos condicionalmente según un valor de cambio.

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



@Component({

    selector: 'app-switch',

    template: `

        <div [ngSwitch]="color">

            <p *ngSwitchCase="'red'">Red color</p>

            <p *ngSwitchCase="'green'">Green color</p>

            <p *ngSwitchDefault>Default color</p>

        </div>

    `

})

export class SwitchComponent {

    color = 'green';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` le permite configurar dinámicamente estilos CSS basados en un objeto.

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



@Component({

    selector: 'app-style',

    template: `

        <div [ngStyle]="styles">Styled Div</div>

    `

})

export class StyleComponent {

    styles = {

        'color': 'blue',

        'font-size': '20px'

    };

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite aplicar condicionalmente clases CSS basadas en una expresión.

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



@Component({

    selector: 'app-class',

    template: `

        <div [ngClass]="{'active': isActive, 'inactive': !isActive}">Styled Div</div>

    `

})

export class ClassComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional entre las entradas del formulario y las propiedades del componente.

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



@Component({

    selector: 'app-two-way-binding',

    template: `

        <input [(ngModel)]="name">

        <p>Hello, {{ name }}!</p>

    `

})

export class TwoWayBindingComponent {

    name: string = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormControl` se utiliza para gestionar el estado y la validación de controles de formulario individuales.

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

import { FormControl } from '@angular/forms';



@Component({

    selector: 'app-form-control',

    template: `

        <input [formControl]="nameControl">

        <p>Control Value: {{ nameControl.value }}</p>

    `

})

export class FormControlComponent {

    nameControl = new FormControl('');

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormGroup` se utiliza para agrupar instancias relacionadas de `FormControl` en una sola entidad.

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

import { FormGroup, FormControl } from '@angular/forms';



@Component({

    selector: 'app-form-group',

    template: `

        <form [formGroup]="form">

            <input formControlName="name">

            <input formControlName="email">

        </form>

    `

})

export class FormGroupComponent {

    form = new FormGroup({

        name: new FormControl(''),

        email: new FormControl('')

    });

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ViewChild` le permite acceder a componentes secundarios o elementos DOM desde el componente principal.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<p #childParagraph>Child Component</p>`

})

export class ChildComponent {}



@Component({

    selector: 'app-parent',

    template: `

        <app-child></app-child>

        <button (click)="logChildParagraph()">Log Child Paragraph</button>

    `

})

export class ParentComponent implements AfterViewInit {

    @ViewChild(ChildComponent) child!: ChildComponent;

    @ViewChild('childParagraph') childParagraph!: ElementRef;



    ngAfterViewInit() {

        console.log(this.child);

        console.log(this.childParagraph.nativeElement.textContent);

    }



    logChildParagraph() {

        console.log(this.childParagraph.nativeElement.textContent);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@ContentChild` le permite acceder al contenido proyectado en el componente usando `ng-content`.

import { Component, ContentChild, AfterContentInit, ElementRef } from '@angular/core';



@Component({

    selector: 'app-card',

    template: `

        <ng-content></ng-content>

    `

})

export class CardComponent implements AfterContentInit {

    @ContentChild('cardContent') cardContent!: ElementRef;



    ngAfterContentInit() {

        console.log(this.cardContent.nativeElement.textContent);

    }

}



@Component({

    selector: 'app-root',

    template: `

        <app-card>

            </app-card><app-card><p #cardContent>Card Content</p>

        </app-card>

    `

})

export class AppComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Input` permite que un componente principal pase datos a un componente secundario.

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



@Component({

    selector: 'app-child',

    template: `<p>Received: {{ data }}</p>`

})

export class ChildComponent {

    @Input() data!: string;

}



@Component({

    selector: 'app-parent',

    template: `<app-child [data]="parentData"></app-child>`

})

export class ParentComponent {

    parentData = 'Data from Parent';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Output` se utiliza para crear eventos personalizados que un componente secundario puede emitir a su padre.

import { Component, EventEmitter, Output } from '@angular/core';



@Component({

    selector: 'app-child',

    template: `<button (click)="sendMessage()">Send Message</button>`

})

export class ChildComponent {

    @Output() message = new EventEmitter<string>();



    sendMessage() {

        this.message.emit('Hello from Child');

    }

}



@Component({

    selector: 'app-parent',

    template: `<app-child (message)="receiveMessage($event)"></app-child>`

})

export class ParentComponent {

    receiveMessage(message: string) {

        console.log(message);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El módulo `ReactiveForms` proporciona una manera de crear formularios con validación usando `FormGroup` y `FormControl`.

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

import { FormGroup, FormControl, Validators } from '@angular/forms';



@Component({

    selector: 'app-reactive-form',

    template: `

        <form [formGroup]="form" (ngSubmit)="onSubmit()">

            <label for="label">Name:</label>

            <input id="label" formControlName="name">

            <div *ngIf="form.get('name')?.invalid && form.get('name')?.touched">

                Name is required.

            </div>

            <button type="submit">Submit</button>

        </form>

    `

})

export class ReactiveFormComponent {

    form = new FormGroup({

        name: new FormControl('', Validators.required)

    });



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngFor` se puede utilizar con una plantilla personalizada para mostrar una lista de elementos.

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



@Component({

    selector: 'app-item-list',

    template: `

        <ul>

            <ng-container *ngFor="let item de items; let i = index">

                </ng-container><ng-container *ngFor="let item de items; let i = index"><li>{{ i + 1 }}. {{ item }}</li>

            </ng-container>

        </ul>

    `

})

export class ItemListComponent {

    items = ['Item 1', 'Item 2', 'Item 3'];

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngIf` se puede usar con la cláusula `else` para mostrar condicionalmente contenido alternativo.

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



@Component({

    selector: 'app-conditional',

    template: `

        <div *ngIf="isVisible; else elseBlock">

            <p>Content is visible</p>

        </div>

        <ng-template #elseBlock>

            </ng-template><ng-template #elseBlock><p>Content is hidden</p>

        </ng-template>

    `

})

export class ConditionalComponent {

    isVisible = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngSwitch` se puede usar con múltiples directivas `ngSwitchCase` para manejar diferentes casos.

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



@Component({

    selector: 'app-switch',

    template: `

        <div [ngSwitch]="color">

            <p *ngSwitchCase="'red'">Red</p>

            <p *ngSwitchCase="'green'">Green</p>

            <p *ngSwitchCase="'blue'">Blue</p>

            <p *ngSwitchDefault>Unknown color</p>

        </div>

    `

})

export class SwitchComponent {

    color = 'green';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngStyle` le permite aplicar estilos condicionalmente basados en un objeto.

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



@Component({

    selector: 'app-style',

    template: `

        <div [ngStyle]="{ 'background-color': isActive ? 'yellow' : 'white' }">

            Conditional Style

        </div>

    `

})

export class StyleComponent {

    isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngClass` le permite alternar múltiples clases CSS basadas en un objeto o matriz.

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



@Component({

    selector: 'app-class',

    template: `

        <div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }">Styled Div</div>

    `

})

export class ClassComponent {

    isActive = true;

    isHighlighted = false;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La directiva `ngModel` se utiliza para el enlace de datos bidireccional en formularios.

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



@Component({

    selector: 'app-form',

    template: `

        <form>

            <label for="label">Name:</label>

            <input id="label" [(ngModel)]="name" name="name2">

            <p>Your name is {{ name }}</p>

        </form>

    `

})

export class FormComponent {

    name = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `FormBuilder` ayuda a crear instancias `FormGroup` y `FormControl` más fácilmente.

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

    selector: 'app-form-builder',

    template: `

        <form [formGroup]="form" (ngSubmit)="onSubmit()">

            <label for="email">Email:</label>

            <input id="email" formControlName="email">

            <div *ngIf="form.get('email')?.invalid && form.get('email')?.touched">

                Email is required.

            </div>

            <button type="submit">Submit</button>

        </form>

    `

})

export class FormBuilderComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            email: ['', Validators.required]

        });

    }



    onSubmit() {

        console.log(this.form.value);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La clase `FormArray` se utiliza para manejar una matriz de controles o grupos de formulario.

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

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';



@Component({

    selector: 'app-form-array',

    template: `

        <form [formGroup]="form">

            <div formArrayName="items">

                <div *ngFor="let item de items.controls; let i = index">

                    <input [formControlName]="i">

                </div>

            </div>

            <button (click)="addItem()">Add Item</button>

        </form>

    `

})

export class FormArrayComponent {

    form: FormGroup;



    constructor(private fb: FormBuilder) {

        this.form = this.fb.group({

            items: this.fb.array([''])

        });

    }



    get items() {

        return this.form.get('items') as FormArray;

    }



    addItem() {

        this.items.push(this.fb.control(''));

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`AsyncPipe` se suscribe a un observable o promesa y devuelve el último valor.

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

import { Observable, de } from 'rxjs';



@Component({

    selector: 'app-async',

    template: `

        <div *ngIf="data$ | async as data">

            {{ data }}

        </div>

    `

})

export class AsyncComponent {

    data$: Observable<string> = of('Asynchronous Data');

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

`ChangeDetectionStrategy` se puede configurar en `OnPush` para optimizar la detección de cambios comprobando solo cuando cambian las propiedades de entrada.

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



@Component({

    selector: 'app-on-push',

    template: `<p>OnPush Change Detection</p>`,

    changeDetection: ChangeDetectionStrategy.OnPush

})

export class OnPushComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El decorador `@Injectable` se utiliza para marcar una clase como disponible para ser inyectada. Los servicios se pueden proporcionar en diferentes niveles, como en la raíz o en un módulo específico.

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



@Injectable({

    providedIn: 'root' // or provide in a specific module

})

export class DataService {

    constructor() { }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `HttpClient` se utiliza para realizar solicitudes HTTP y manejar respuestas.

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

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



@Component({

    selector: 'app-http',

    template: `

        <button (click)="fetchData()">Fetch Data</button>

        <pre>{{ data | json }}

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `Router` se utiliza para navegar entre rutas mediante programación.

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

import { Router } from '@angular/router';



@Component({

    selector: 'app-navigation',

    template: `<button (click)="goToHome()">Go to Home</button>`

})

export class NavigationComponent {

    constructor(private router: Router) { }



    goToHome() {

        this.router.navigate(['/home']);

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El servicio `ActivatedRoute` se utiliza para acceder a los parámetros de ruta y consultar los parámetros.

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

import { ActivatedRoute } from '@angular/router';



@Component({

    selector: 'app-route-params',

    template: `<p>Route Parameter: {{ id }}</p>`

})

export class RouteParamsComponent implements OnInit {

    id!: string;



    constructor(private route: ActivatedRoute) { }



    ngOnInit() {

        this.route.paramMap.subscribe(params => {

            this.id = params.get('id')!;

        });

    }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El `RouterModule` se utiliza para definir y configurar rutas en una aplicación Angular.

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';



const routes: Routes = [

    { path: '', component: HomeComponent },

    { path: 'about', component: AboutComponent }

];



@NgModule({

    imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Para crear un decorador personalizado en Angular, define una función que devuelve una función que se aplica al objetivo. Por ejemplo:

function LogClass(target: Function) {

    console.log("Class:", target);

}



@LogClass

class ExampleClass {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular Guards son interfaces que le permiten controlar el acceso a las rutas. Se implementan mediante la creación de clases que implementan una o más de las interfaces de protección:

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

  providedIn: 'root'

})

export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}



  canActivate(): boolean {

    const isLoggedIn = /* logic to check if the user is logged in */;

    if (isLoggedIn) {

      return true;

    } else {

      this.router.navigate(['/login']);

      return false;

    }

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Puedes crear formularios dinámicos usando FormBuilder and FormGroup. Here's an example:

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

import { FormBuilder, FormGroup } from '@angular/forms';



@Component({

  selector: 'app-dynamic-form',

  template: \`

    <form [formGroup]="form">

      <label for="name">Name:</label>

      <input id="name" formControlName="name">

      <label for="age">Age:</label>

      <input id="age" formControlName="age">

    </form>

  \`

})

export class DynamicFormComponent {

  form: FormGroup;



  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      name: [''],

      age: ['']

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La estrategia de detección de cambios predeterminada de Angular es CheckAlways, where Angular checks all components to see if they need to be updated. You can use the OnPush strategy to optimize performance, which only checks the component when its inputs change or when an event occurs:

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



@Component({

  selector: 'app-on-push',

  templateUrl: './on-push.component.html',

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class OnPushComponent {

  // Component logic

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La gestión del estado en Angular se puede manejar utilizando bibliotecas como NgRx or Akita. For example, using NgRx involves creating actions, reducers, and selectors:

import { createAction, props } from '@ngrx/store';



export const loadItems = createAction('[Items Page] Load Items');

export const loadItemsSuccess = createAction('[Items API] Items Loaded Success', props<{ items: any[] }>());



import { createReducer, on } from '@ngrx/store';



export const initialState = [];



const _itemsReducer = createReducer(

  initialState,

  on(loadItemsSuccess, (state, { items }) => [...items])

);



export function itemsReducer(state, action) {

  return _itemsReducer(state, action);

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La inyección de dependencia (DI) en Angular le permite inyectar dependencias (servicios) en componentes y otros servicios. Puede usarlo definiendo un servicio y luego inyectándolo en un componente:

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



@Injectable({

  providedIn: 'root'

})

export class MyService {

  // Service logic

}



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

import { MyService } from './my.service';



@Component({

  selector: 'app-example',

  template: \`<p>Example component</p>\`

})

export class ExampleComponent {

  constructor(private myService: MyService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

el HttpClient module is used to make HTTP requests. Here's an example de making a GET request:

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

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



@Component({

  selector: 'app-api',

  template: \`<p>Data: {{ data | json }}</p>\`

})

export class ApiComponent {

  data: any;



  constructor(private http: HttpClient) {

    this.http.get('https://api.example.com/data')

      .subscribe(response => {

        this.data = response;

      });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El rendimiento se puede optimizar utilizando técnicas como carga diferida, trackBy en ngFor y estrategia de detección de cambios OnPush:

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

import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [

  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }

];



@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }



<ng-container *ngFor="let item de items; trackBy: trackById">

  <div>{{ item.name }}</div>

</ng-container>



trackById(index: number, item: any): number {

  return item.id;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos proporcionan un enfoque basado en modelos para manejar las entradas del formulario. Ofrecen ventajas como una mejor escalabilidad, pruebas unitarias más sencillas y más control sobre la validación de formularios:

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

  selector: 'app-reactive-form',

  template: \`

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

      <input formControlName="name">

      <input formControlName="email">

      <button type="submit">Submit</button>

    </form>

  \`

})

export class ReactiveFormComponent {

  form: FormGroup;



  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      name: ['', Validators.required],

      email: ['', [Validators.required, Validators.email]]

    });

  }



  onSubmit() {

    console.log(this.form.value);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Para manejar rutas con parámetros, defina parámetros en la configuración de ruta y acceda a ellos en el componente:

import { ActivatedRoute } from '@angular/router';

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



@Component({

  selector: 'app-route-param',

  template: \`<p>Param: {{ id }}</p>\`

})

export class RouteParamComponent implements OnInit {

  id: string;



  constructor(private route: ActivatedRoute) {}



  ngOnInit() {

    this.route.paramMap.subscribe(params => {

      this.id = params.get('id');

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgZone allows you to run code inside or outside Angular's change detection. This is useful for optimizing performance:

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



@Component({

  selector: 'app-ngzone',

  template: \`<p>NgZone example</p>\`

})

export class NgZoneComponent {

  constructor(private ngZone: NgZone) {

    this.ngZone.runOutsideAngular(() => {

      // Code that does not trigger change detection

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree una biblioteca usando Angular CLI y luego inclúyala en su aplicación:

ng generate library my-lib

ng build my-lib



// In your application module

import { MyLibModule } from 'my-lib';



@NgModule({

  imports: [MyLibModule]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular Universal se utiliza para la renderización del lado del servidor (SSR). Permite renderizar aplicaciones Angular en el servidor antes de enviarlas al cliente:

ng add @nguniversal/express-engine



// server.ts

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';

import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

import { AppServerModule } from './src/main.server';



const app = express();

app.engine('html', ngExpressEngine({

  bootstrap: AppServerModule,

  providers: [provideModuleMap(LAZY_MODULE_MAP)]

}));

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las tuberías personalizadas se crean implementando la PipeTransform interface:

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

  name: 'customPipe'

})

export class CustomPipe implements PipeTransform {

  transform(value: string, ...args: any[]): string {

    return value.toUpperCase();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular proporciona varios validadores integrados para formularios:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

  selector: 'app-validators',

  template: \`

    <form [formGroup]="form">

      <input formControlName="email">

      <input formControlName="password">

    </form>

  \`

})

export class ValidatorsComponent {

  form: FormGroup;



  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      email: ['', [Validators.required, Validators.email]],

      password: ['', [Validators.required, Validators.minLength(6)]]

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La proyección de contenido le permite pasar contenido a la plantilla de un componente. Utilice el <ng-content> directive:

<ng-content></ng-content>



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



@Component({

  selector: 'app-content-projection',

  template: \`

    <div>

      <ng-content></ng-content>

    </div>

  \`

})

export class ContentProjectionComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de funciones se pueden cargar de forma diferida configurando rutas con loadChildren:

const routes: Routes = [

  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los observables se utilizan para manejar datos asincrónicos. Utilice el subscribe method to react to data changes:

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

import { Observable } from 'rxjs';

import { DataService } from './data.service';



@Component({

  selector: 'app-observable',

  template: \`<p>Data: {{ data | json }}</p>\`

})

export class ObservableComponent implements OnInit {

  data$: Observable<any>;



  constructor(private dataService: DataService) {}



  ngOnInit() {

    this.data$ = this.dataService.getData();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ViewChild allows you to access a child component or element in your template:

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

import { ChildComponent } from './child.component';



@Component({

  selector: 'app-parent',

  template: \`<app-child #childRef></app-child>\`

})

export class ParentComponent {

  @ViewChild('childRef') childComponent: ChildComponent;



  ngAfterViewInit() {

    console.log(this.childComponent);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los ganchos del ciclo de vida son métodos en Angular que le permiten aprovechar momentos clave del ciclo de vida de un componente:

import { Component, OnInit, OnDestroy } from '@angular/core';



@Component({

  selector: 'app-lifecycle',

  template: \`<p>Lifecycle hooks example</p>\`

})

export class LifecycleComponent implements OnInit, OnDestroy {

  ngOnInit() {

    console.log('Component Initialized');

  }



  ngOnDestroy() {

    console.log('Component Destroyed');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los validadores personalizados se utilizan para agregar lógica de validación a los controles de formulario. Implemente un validador personalizado creando una función que devuelva nulo o un objeto que indique el error de validación:

import { AbstractControl, ValidatorFn } from '@angular/forms';



export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {

  return (control: AbstractControl): {[key: string]: any} | null => {

    const forbidden = nameRe.test(control.value);

    return forbidden ? { 'forbiddenName': { value: control.value } } : null;

  };

}



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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

  selector: 'app-custom-validator',

  template: \`

    <form [formGroup]="form">

      <input formControlName="name">

      <div *ngIf="form.get('name').hasError('forbiddenName')">

        Name is forbidden

      </div>

    </form>

  \`

})

export class CustomValidatorComponent {

  form: FormGroup;



  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      name: ['', [forbiddenNameValidator(/admin/)]]

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Para proporcionar varias instancias de un servicio, utilice diferentes proveedores con un token único:

import { Injectable, InjectionToken } from '@angular/core';



export const MY_SERVICE_TOKEN = new InjectionToken<MyService>('MyService');



@Injectable()

export class MyService {

  constructor() {}

}



@NgModule({

  providers: [

    { provide: MY_SERVICE_TOKEN, useClass: MyService }

  ]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice un interceptor HTTP para detectar y manejar errores HTTP:

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';

import { catchError } from 'rxjs/operators';

import { throwError } from 'rxjs';



@Injectable()

export class ErrorInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    return next.handle(req).pipe(

      catchError((error: HttpErrorResponse) => {

        console.error('HTTP Error:', error);

        return throwError(error);

      })

    );

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Defina rutas secundarias dentro de una configuración de ruta principal:

const routes: Routes = [

  {

    path: 'parent',

    component: ParentComponent,

    children: [

      { path: 'child1', component: Child1Component },

      { path: 'child2', component: Child2Component }

    ]

  }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgRx Effects le permite manejar los efectos secundarios en su aplicación. Cree efectos para escuchar acciones y realizar tareas como solicitudes HTTP:

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

import { Actions, createEffect, ofType } from '@ngrx/effects';

import { MyService } from './my.service';

import { loadItems, loadItemsSuccess } from './actions';

import { switchMap } from 'rxjs/operators';



@Injectable()

export class MyEffects {

  loadItems$ = createEffect(() =>

    this.actions$.pipe(

      ofType(loadItems),

      switchMap(() => this.myService.getItems()

        .pipe(map(items => loadItemsSuccess({ items })))

      )

    )

  );



  constructor(

    private actions$: Actions,

    private myService: MyService

  ) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las directivas personalizadas se utilizan para ampliar el comportamiento de HTML. Cree una directiva definiendo una clase y usando el @Directive decorator:

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}



  @HostListener('mouseenter') onMouseEnter() {

    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

  }



  @HostListener('mouseleave') onMouseLeave() {

    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular proporciona diferentes estrategias de encapsulación para estilos de componentes. uso ViewEncapsulation to control this:

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



@Component({

  selector: 'app-encapsulation',

  template: \`<p>Encapsulation example</p>\`,

  styles: [\`

    p {

      color: red;

    }

  \`],

  encapsulation: ViewEncapsulation.None

})

export class EncapsulationComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice el loadChildren property in route configurations to lazy-load modules:

const routes: Routes = [

  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ChangeDetectorRef provides methods to manually trigger change detection in a component:

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



@Component({

  selector: 'app-change-detection',

  template: \`<p>Change detection example</p>\`

})

export class ChangeDetectionComponent {

  constructor(private cdr: ChangeDetectorRef) {}



  detectChanges() {

    this.cdr.detectChanges();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Renderer2 is used to safely manipulate the DOM in Angular. Here’s an example de adding a class to an element:

import { Component, ElementRef, Renderer2 } from '@angular/core';



@Component({

  selector: 'app-renderer',

  template: \`<div #myDiv>Renderer2 Example</div>\`

})

export class RendererComponent {

  constructor(private el: ElementRef, private renderer: Renderer2) {}



  ngAfterViewInit() {

    const div = this.el.nativeElement.querySelector('div');

    this.renderer.addClass(div, 'highlight');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

AsyncPipe allows you to subscribe to observables directly in the template:

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

import { Observable } from 'rxjs';

import { DataService } from './data.service';



@Component({

  selector: 'app-async-pipe',

  template: \`<p>Data: {{ data$ | async | json }}</p>\`

})

export class AsyncPipeComponent implements OnInit {

  data$: Observable<any>;



  constructor(private dataService: DataService) {}



  ngOnInit() {

    this.data$ = this.dataService.getData();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ChangeDetectionStrategy controls how Angular checks for changes in a component. Use ChangeDetectionStrategy.OnPush to optimize performance:

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



@Component({

  selector: 'app-change-detection-strategy',

  template: \`<p>Change Detection Strategy Example</p>\`,

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class ChangeDetectionStrategyComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

HostBinding and HostListener are used to bind properties and listen to events on the host element:

import { Component, HostBinding, HostListener } from '@angular/core';



@Component({

  selector: 'app-host',

  template: \`<p>Host Binding and Listener Example</p>\`

})

export class HostComponent {

  @HostBinding('class.highlight') isHighlighted = true;



  @HostListener('click') onClick() {

    this.isHighlighted = !this.isHighlighted;

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ngOnChanges is called when an input property value changes:

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';



@Component({

  selector: 'app-on-changes',

  template: \`<p>On Changes Example</p>\`

})

export class OnChangesComponent implements OnChanges {

  @Input() data: any;



  ngOnChanges(changes: SimpleChanges) {

    console.log('Changes:', changes);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ng-container and ng-template are used to manage templates and control the rendering:

<ng-container *ngIf="condition">

  <ng-template #template>

    </ng-template></ng-container><ng-container *ngIf="condition"><ng-template #template><p>Content to render</p>

  </ng-template>

</ng-container>



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



@Component({

  selector: 'app-container',

  template: \`

    <ng-container *ngIf="showContent; else noContent">

      </ng-container><ng-container *ngIf="showContent; else noContent"><p>Content is visible</p>

    </ng-container>

    <ng-template #noContent>

      </ng-template><ng-template #noContent><p>Content is hidden</p>

    </ng-template>

  \`

})

export class ContainerComponent {

  showContent = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Administre las configuraciones del entorno utilizando archivos de entorno:

// environment.ts

export const environment = {

  production: false,

  apiUrl: 'http://localhost:3000'

};



// environment.prod.ts

export const environment = {

  production: true,

  apiUrl: 'https://api.example.com'

};

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las directivas estructurales personalizadas se crean utilizando el *ngIf and *ngFor syntax:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';



@Directive({

  selector: '[appMyDirective]'

})

export class MyDirective {

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}



  @Input() set appMyDirective(condition: boolean) {

    this.viewContainer.clear();

    if (condition) {

      this.viewContainer.createEmbeddedView(this.templateRef);

    }

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El manejo de errores globales se configura mediante una clase de controlador de errores:

import { Injectable, ErrorHandler } from '@angular/core';



@Injectable()

export class GlobalErrorHandler implements ErrorHandler {

  handleError(error: any) {

    console.error('Global error:', error);

  }

}



@NgModule({

  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La internacionalización se gestiona mediante el paquete Angular i18n:

ng add @angular/localize



// app.component.html

<p i18n="@@hello">Hello</p>



// Extract messages

ng extract-i18n



// Translate and build for a specific locale

ng build --localize

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Renderer2 can be used to dynamically create and manipulate components:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

import { DynamicComponent } from './dynamic.component';



@Component({

  selector: 'app-dynamic',

  template: \`<ng-template #container></ng-template>\`

})

export class DynamicComponentLoader {

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;



  constructor(private resolver: ComponentFactoryResolver) {}



  loadComponent() {

    const factory = this.resolver.resolveComponentFactory(DynamicComponent);

    this.container.clear();

    this.container.createComponent(factory);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se utilizan canalizaciones personalizadas para transformar datos en la plantilla. Cree una tubería definiendo una clase y usando el @Pipe decorator:

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

  name: 'customPipe'

})

export class CustomPipe implements PipeTransform {

  transform(value: string, ...args: any[]): string {

    return value.toUpperCase();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ChangeDetectorRef can be used to manually control change detection, such as when you need to update the view outside de Angular's default change detection cycle:

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



@Component({

  selector: 'app-manual-change',

  template: \`<p>{{ data }}</p>\`

})

export class ManualChangeComponent {

  data = 'Initial data';



  constructor(private cdr: ChangeDetectorRef) {}



  updateData() {

    this.data = 'Updated data';

    this.cdr.detectChanges();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios reactivos permiten una lógica de validación más compleja. A continuación se explica cómo crear un formulario con validadores personalizados:

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

  selector: 'app-reactive-form',

  template: \`

    <form [formGroup]="form" (ngSubmit)="onSubmit()">

      <input formControlName="username">

      <div *ngIf="form.get('username').hasError('forbiddenName')">

        Username is forbidden

      </div>

      <button type="submit">Submit</button>

    </form>

  \`

})

export class ReactiveFormComponent {

  form: FormGroup;



  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      username: ['', [this.forbiddenNameValidator(/admin/)]]

    });

  }



  forbiddenNameValidator(nameRe: RegExp) {

    return (control: AbstractControl): {[key: string]: any} | null => {

      const forbidden = nameRe.test(control.value);

      return forbidden ? { 'forbiddenName': { value: control.value } } : null;

    };

  }



  onSubmit() {

    console.log(this.form.value);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice Angular ComponentFactoryResolver to dynamically load components:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

import { DynamicComponent } from './dynamic.component';



@Component({

  selector: 'app-dynamic-loader',

  template: \`<ng-template #container></ng-template>\`

})

export class DynamicLoaderComponent {

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;



  constructor(private resolver: ComponentFactoryResolver) {}



  loadComponent() {

    const factory = this.resolver.resolveComponentFactory(DynamicComponent);

    this.container.clear();

    this.container.createComponent(factory);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de carga diferida permiten una carga más eficiente de aplicaciones Angular. Defina un módulo con carga diferida en su configuración de enrutamiento:

const routes: Routes = [

  {

    path: 'lazy',

    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

  }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgRx proporciona una forma de administrar el estado en aplicaciones Angular mediante una tienda. Definir acciones, reductores y efectos:

import { createAction, createReducer, on } from '@ngrx/store';



// Actions

export const loadItems = createAction('[Item] Load Items');

export const loadItemsSuccess = createAction('[Item] Load Items Success', (items: any[]) => ({ items }));



// Reducer

export const initialState = [];

const _itemsReducer = createReducer(

  initialState,

  on(loadItemsSuccess, (state, { items }) => [...items])

);



export function itemsReducer(state, action) {

  return _itemsReducer(state, action);

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las directivas estructurales cambian la estructura del DOM. Cree una directiva estructural personalizada como esta:

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';



@Directive({

  selector: '[appUnless]'

})

export class UnlessDirective {

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}



  @Input() set appUnless(condition: boolean) {

    if (!condition) {

      this.viewContainer.createEmbeddedView(this.templateRef);

    } else {

      this.viewContainer.clear();

    }

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

HostListener can be used to listen to events on the host element de a component:

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



@Component({

  selector: 'app-host-listener',

  template: \`<p>Host Listener Example</p>\`

})

export class HostListenerComponent {

  @HostListener('click', ['$event'])

  onClick(event: Event) {

    console.log('Host element clicked:', event);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ng-content allows you to project content into a component:

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



@Component({

  selector: 'app-content',

  template: \`<ng-content></ng-content>\`

})

export class ContentComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

@ContentChild and @ContentChildren are used to access content projected into a component:

import { Component, ContentChild, ContentChildren, QueryList } from '@angular/core';



@Component({

  selector: 'app-content-query',

  template: \`<ng-content></ng-content>\`

})

export class ContentQueryComponent {

  @ContentChild('contentRef') contentChild: ElementRef;

  @ContentChildren('contentRef') contentChildren: QueryList<ElementRef>;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se pueden utilizar decoradores personalizados para agregar metadatos a clases o métodos:

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



export function CustomDecorator(message: string) {

  return createDecorator((target: Function) => {

    target.prototype.customMessage = message;

  });

}



@CustomDecorator('Hello World')

export class CustomClass {

  customMessage: string;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los alcances de la inyección de dependencia se pueden controlar utilizando el providedIn property:

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



@Injectable({

  providedIn: 'root'  // Singleton scope

})

export class MyService {}



@Injectable({

  providedIn: 'any'   // Scoped to any module or component

})

export class ScopedService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los interceptores HTTP se pueden utilizar para modificar solicitudes y respuestas globalmente:

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const authReq = req.clone({

      headers: req.headers.set('Authorization', 'Bearer my-token')

    });

    return next.handle(authReq);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las protecciones de enrutador se pueden utilizar para proteger rutas según las condiciones:

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

import { CanActivate, Router } from '@angular/router';

import { Observable } from 'rxjs';



@Injectable({

  providedIn: 'root'

})

export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}



  canActivate(): Observable<boolean> | Promise<boolean> | boolean {

    const isAuthenticated = false;  // Implement your authentication check here

    if (!isAuthenticated) {

      this.router.navigate(['/login']);

      return false;

    }

    return true;

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgModule helps in organizing an application into cohesive blocks de functionality:

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FeatureModule } from './feature/feature.module';



@NgModule({

  declarations: [AppComponent],

  imports: [

    BrowserModule,

    FeatureModule

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Se pueden crear y utilizar validadores personalizados en formularios reactivos:

import { AbstractControl, ValidatorFn } from '@angular/forms';



export function passwordMatchValidator(): ValidatorFn {

  return (control: AbstractControl): {[key: string]: any} | null => {

    const password = control.get('password');

    const confirmPassword = control.get('confirmPassword');

    return password && confirmPassword && password.value !== confirmPassword.value

      ? { 'mismatch': true }

      : null;

  };

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

@ViewChild and @ViewChildren are used to query and access elements or directives in the component's view:

import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

  selector: 'app-parent',

  template: \`

    <app-child #child></app-child>

    <app-child *ngFor="let child de children" #children></app-child>

  \`

})

export class ParentComponent {

  @ViewChild('child') child: ChildComponent;

  @ViewChildren('children') children: QueryList<ChildComponent>;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La carga diferida de módulos con parámetros de ruta implica pasar parámetros a la ruta y configurar el módulo en consecuencia:

const routes: Routes = [

  {

    path: 'lazy/:id',

    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

  }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Renderer2 is used for safe and compatible DOM manipulation:

import { Component, Renderer2, ElementRef } from '@angular/core';



@Component({

  selector: 'app-renderer',

  template: \`<div #box>Content</div>\`

})

export class RendererComponent {

  constructor(private renderer: Renderer2, private el: ElementRef) {}



  changeColor() {

    this.renderer.setStyle(this.el.nativeElement.querySelector('div'), 'color', 'red');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

ngOnInit is called after the component is initialized, while ngAfterViewInit is called after the view has been fully initialized:

import { Component, OnInit, AfterViewInit } from '@angular/core';



@Component({

  selector: 'app-lifecycle',

  template: \`<p>Lifecycle Hooks Example</p>\`

})

export class LifecycleComponent implements OnInit, AfterViewInit {

  ngOnInit() {

    console.log('OnInit called');

  }



  ngAfterViewInit() {

    console.log('AfterViewInit called');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los módulos de funciones ayudan a organizar una aplicación Angular en bloques cohesivos. A continuación se explica cómo configurar un módulo de funciones:

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

import { CommonModule } from '@angular/common';

import { FeatureComponent } from './feature.component';

import { FeatureRoutingModule } from './feature-routing.module';



@NgModule({

  declarations: [FeatureComponent],

  imports: [

    CommonModule,

    FeatureRoutingModule

  ]

})

export class FeatureModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Las directivas personalizadas se utilizan para ampliar el comportamiento de los elementos. A continuación se muestra un ejemplo de una directiva personalizada:

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}



  @HostListener('mouseenter') onMouseEnter() {

    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

  }



  @HostListener('mouseleave') onMouseLeave() {

    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cuando necesite proporcionar varias instancias o configuraciones de un servicio, puede utilizar tokens de múltiples proveedores:

import { InjectionToken, Injectable, Inject } from '@angular/core';



export const CONFIG = new InjectionToken('app.config');



@Injectable({

  providedIn: 'root'

})

export class ConfigService {

  constructor(@Inject(CONFIG) private config: string[]) {}

}



// In a module

@NgModule({

  providers: [

    { provide: CONFIG, useValue: ['config1', 'config2'], multi: true }

  ]

})

export class AppModule { }

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Para optimizar el rendimiento, puede utilizar técnicas como carga diferida, compilación anticipada (AOT) y estrategias de detección de cambios:

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



@Component({

  selector: 'app-performance',

  templateUrl: './performance.component.html',

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class PerformanceComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los formularios dinámicos se crean en función de los datos recibidos en tiempo de ejecución. Utilice las formas reactivas de Angular para crear controles dinámicos:

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

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';



@Component({

  selector: 'app-dynamic-form',

  template: \`

    <form [formGroup]="form">

      <div formArrayName="items">

        <div *ngFor="let item de items.controls; let i = index">

          <input [formControlName]="i">

        </div>

      </div>

    </form>

  \`

})

export class DynamicFormComponent implements OnInit {

  form: FormGroup;



  constructor(private fb: FormBuilder) {}



  ngOnInit() {

    this.form = this.fb.group({

      items: this.fb.array([this.fb.control('')])

    });

  }



  get items() {

    return this.form.get('items') as FormArray;

  }



  addItem() {

    this.items.push(this.fb.control(''));

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cargue de forma diferida un módulo con rutas anidadas definiendo rutas secundarias en el módulo de carga diferida:

const routes: Routes = [

  {

    path: 'lazy',

    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),

    children: [

      { path: 'child', component: ChildComponent }

    ]

  }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgZone helps to execute code outside Angular's change detection:

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



@Component({

  selector: 'app-ngzone',

  template: \`<p>NgZone Example</p>\`

})

export class NgZoneComponent {

  constructor(private ngZone: NgZone) {

    this.ngZone.runOutsideAngular(() => {

      // Code running outside Angular's zone

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Angular Universal le permite realizar renderizado del lado del servidor para mejorar el rendimiento y el SEO. Instale Angular Universal y configúrelo:

ng add @nguniversal/express-engine

// Configure server.ts and other settings

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Manejar parámetros de ruta y consulta en componentes angulares:

import { ActivatedRoute } from '@angular/router';



@Component({

  selector: 'app-route',

  template: \`<p>Route Parameter: {{ param }}</p>\`

})

export class RouteComponent implements OnInit {

  param: string;



  constructor(private route: ActivatedRoute) {}



  ngOnInit() {

    this.route.paramMap.subscribe(params => {

      this.param = params.get('id');

    });



    this.route.queryParams.subscribe(queryParams => {

      console.log(queryParams);

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Crea elementos personalizados con Angular y úsalos en otras aplicaciones:

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

import { createCustomElement } from '@angular/elements';

import { BrowserModule } from '@angular/platform-browser';

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



@Component({

  selector: 'app-custom-element',

  template: \`<p>Custom Element</p>\`

})

export class CustomElementComponent {}



@NgModule({

  declarations: [CustomElementComponent],

  imports: [BrowserModule],

  entryComponents: [CustomElementComponent]

})

export class AppModule {

  constructor(private injector: Injector) {

    const el = createCustomElement(CustomElementComponent, { injector });

    customElements.define('custom-element', el);

  }



  ngDoBootstrap() {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso HttpClient for advanced HTTP operations like interceptors, retries, and request caching:

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

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

import { catchError, retry } from 'rxjs/operators';



@Injectable({

  providedIn: 'root'

})

export class ApiService {

  constructor(private http: HttpClient) {}



  getData() {

    return this.http.get('https://api.example.com/data', {

      headers: new HttpHeaders({

        'Authorization': 'Bearer my-token'

      })

    }).pipe(

      retry(3),

      catchError(this.handleError)

    );

  }



  private handleError(error: any) {

    console.error('An error occurred', error);

    return throwError(error);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La internacionalización y localización implican traducir su aplicación a diferentes idiomas:

ng add @angular/localize

// Use i18n attributes in templates

// Configure locales and translations

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Renderer2 provides a way to safely interact with the DOM:

import { Component, Renderer2, ElementRef } from '@angular/core';



@Component({

  selector: 'app-renderer2',

  template: \`<p>Renderer2 Example</p>\`

})

export class Renderer2Component {

  constructor(private renderer: Renderer2, private el: ElementRef) {

    this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice la API de animación de Angular para crear animaciones complejas:

import { trigger, transition, style, animate } from '@angular/animations';



@Component({

  selector: 'app-animation',

  template: \`<div [@fadeInOut]="state">Content</div>\`,

  animations: [

    trigger('fadeInOut', [

      transition(':enter', [

        style({ opacity: 0 }),

        animate('1s', style({ opacity: 1 }))

      ]),

      transition(':leave', [

        animate('1s', style({ opacity: 0 }))

      ])

    ])

  ]

})

export class AnimationComponent {

  state = 'in';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Optimice el rendimiento mediante el uso ChangeDetectionStrategy.OnPush:

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



@Component({

  selector: 'app-optimization',

  template: \`<p>Optimization Example</p>\`,

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class OptimizationComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @ContentChild and @ContentChildren to query and access projected content:

import { Component, ContentChild, ContentChildren, QueryList } from '@angular/core';

import { ContentComponent } from './content.component';



@Component({

  selector: 'app-parent',

  template: \`<ng-content></ng-content>\`

})

export class ParentComponent {

  @ContentChild(ContentComponent) content: ContentComponent;

  @ContentChildren(ContentComponent) contentChildren: QueryList<ContentComponent>;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @HostListener to listen to events on the host element and @HostBinding to bind properties:

import { Component, HostListener, HostBinding } from '@angular/core';



@Component({

  selector: 'app-host',

  template: \`<p>Host Binding and Listener Example</p>\`

})

export class HostComponent {

  @HostBinding('class.active') isActive = true;



  @HostListener('click') onClick() {

    this.isActive = !this.isActive;

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgModel enables two-way data binding in Angular forms:

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



@Component({

  selector: 'app-model',

  template: \`

    <input [(ngModel)]="value">

    <p>Value: {{ value }}</p>

  \`

})

export class ModelComponent {

  value = '';

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

El manejo de errores globales se puede configurar con interceptores HTTP:

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';

import { catchError } from 'rxjs/operators';



@Injectable()

export class ErrorInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(req).pipe(

      catchError(error => {

        console.error('An error occurred', error);

        return throwError(error);

      })

    );

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configure un trabajador de servicio para habilitar las funciones de PWA:

ng add @angular/pwa

// Configure ngsw-config.json for caching strategies

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

La carga dinámica de componentes le permite cargar componentes en tiempo de ejecución. uso ComponentFactoryResolver:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

import { DynamicComponent } from './dynamic.component';



@Component({

  selector: 'app-dynamic-loader',

  template: \`<ng-template #container></ng-template>\`

})

export class DynamicLoaderComponent {

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;



  constructor(private cfr: ComponentFactoryResolver) {}



  loadComponent() {

    const factory = this.cfr.resolveComponentFactory(DynamicComponent);

    this.container.createComponent(factory);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

@Inject is used for dependency injection with tokens, while @Optional allows you to handle missing dependencies:

import { Injectable, Inject, Optional } from '@angular/core';



@Injectable({

  providedIn: 'root'

})

export class MyService {

  constructor(@Inject('TOKEN') @Optional() private token: string) {

    if (!token) {

      console.log('No token provided');

    }

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

@ViewChild with static or dynamic allows you to control when the view query is resolved:

import { Component, ViewChild, AfterViewInit } from '@angular/core';



@Component({

  selector: 'app-viewchild',

  template: \`<p #paragraph>Text</p>\`

})

export class ViewChildComponent implements AfterViewInit {

  @ViewChild('paragraph', { static: true }) paragraph;



  ngAfterViewInit() {

    console.log(this.paragraph.nativeElement.textContent);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

NgRx proporciona una forma de gestionar el estado en aplicaciones Angular utilizando los principios de Redux. Configure acciones, reductores y efectos:

import { createAction, props } from '@ngrx/store';



export const loadItems = createAction('[Items Page] Load Items');

export const loadItemsSuccess = createAction('[Items API] Load Items Success', props<{ items: any[] }>());

export const loadItemsFailure = createAction('[Items API] Load Items Failure', props<{ error: any }>());

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configure módulos con carga diferida en el módulo de enrutamiento de su aplicación:

const routes: Routes = [

  {

    path: 'feature',

    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)

  }

];

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree validadores personalizados para formularios reactivos:

import { AbstractControl, ValidatorFn } from '@angular/forms';



export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {

  return (control: AbstractControl): { [key: string]: any } | null => {

    const forbidden = nameRe.test(control.value);

    return forbidden ? { 'forbiddenName': { value: control.value } } : null;

  };

}



// Usage in a form

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

  selector: 'app-custom-validation',

  template: \`

    <form [formGroup]="form">

      <input formControlName="name">

      <div *ngIf="form.controls.name.errors?.forbiddenName">

        Name is forbidden

      </div>

    </form>

  \`

})

export class CustomValidationComponent {

  form: FormGroup;



  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      name: ['', [forbiddenNameValidator(/admin/)]]

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @ContentChildren to query multiple projected elements:

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

import { ContentComponent } from './content.component';



@Component({

  selector: 'app-parent',

  template: \`<ng-content></ng-content>\`

})

export class ParentComponent implements AfterContentInit {

  @ContentChildren(ContentComponent) contentComponents: QueryList<ContentComponent>;



  ngAfterContentInit() {

    this.contentComponents.forEach(component => {

      console.log(component.someProperty);

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los protectores del enrutador ayudan a administrar la navegación según condiciones como la autenticación:

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

import { CanActivate, Router } from '@angular/router';



@Injectable({

  providedIn: 'root'

})

export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}



  canActivate(): boolean {

    const isAuthenticated = false; // Replace with real authentication check

    if (!isAuthenticated) {

      this.router.navigate(['/login']);

    }

    return isAuthenticated;

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Controle la encapsulación de estilos de componentes con @ViewEncapsulation:

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



@Component({

  selector: 'app-encapsulation',

  template: \`<p>Encapsulation Example</p>\`,

  styles: [\`

    p {

      color: red;

    }

  \`],

  encapsulation: ViewEncapsulation.None

})

export class EncapsulationComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @HostListener to listen to events like click or hover:

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



@Component({

  selector: 'app-host-listener',

  template: \`<p>Host Listener Example</p>\`

})

export class HostListenerComponent {

  @HostListener('click', ['$event'])

  onClick(event: Event) {

    console.log('Element clicked', event);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

@HostBinding allows you to bind properties like classes or styles:

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



@Component({

  selector: 'app-host-binding',

  template: \`<p>Host Binding Example</p>\`

})

export class HostBindingComponent {

  @HostBinding('class.active') isActive = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @Injectable with providedIn to control hierarchical injection:

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



@Injectable({

  providedIn: 'root' // Hierarchical injectors are created with this configuration

})

export class MyService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Los proveedores de fábrica permiten la creación de instancias personalizadas de servicios:

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



export function myServiceFactory() {

  return new MyService();

}



@NgModule({

  providers: [

    { provide: MyService, useFactory: myServiceFactory }

  ]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Inyectar valores usando tokens y @Inject:

import { Injectable, InjectionToken, Inject } from '@angular/core';



export const MY_TOKEN = new InjectionToken<string>('MyToken');



@Injectable({

  providedIn: 'root'

})

export class MyService {

  constructor(@Inject(MY_TOKEN) private token: string) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Utilice interceptores HTTP para modificar solicitudes y respuestas:

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const authReq = req.clone({

      headers: req.headers.set('Authorization', 'Bearer token')

    });

    return next.handle(authReq);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configurar servicios para toda la aplicación en @NgModule:

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

import { AppComponent } from './app.component';

import { MyService } from './my.service';



@NgModule({

  declarations: [AppComponent],

  imports: [],

  providers: [MyService],

  bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Acceda a componentes secundarios con @ViewChild:

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

  selector: 'app-parent',

  template: \`<app-child></app-child>\`

})

export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) childComponent: ChildComponent;



  ngAfterViewInit() {

    console.log(this.childComponent.someMethod());

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso ChangeDetectorRef for manual change detection:

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



@Component({

  selector: 'app-manual-detection',

  template: \`<p>Manual Detection Example</p>\`

})

export class ManualDetectionComponent {

  constructor(private cdr: ChangeDetectorRef) {}



  triggerChangeDetection() {

    this.cdr.detectChanges();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Definir módulos de funciones y configurar la carga diferida en @NgModule:

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

import { RouterModule, Routes } from '@angular/router';



const routes: Routes = [

  {

    path: 'feature',

    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)

  }

];



@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Gestionar dependencias jerárquicas con @Injectable:

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



@Injectable({

  providedIn: 'root' // or 'platform' or 'any'

})

export class MyService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Defina directivas personalizadas para ampliar el comportamiento HTML:

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';



@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}



  @HostListener('mouseenter') onMouseEnter() {

    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

  }



  @HostListener('mouseleave') onMouseLeave() {

    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree canalizaciones personalizadas para transformar datos en plantillas:

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

  name: 'reverse'

})

export class ReversePipe implements PipeTransform {

  transform(value: string): string {

    return value.split('').reverse().join('');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @Input to pass data from parent to child, and @Output to emit events from child to parent:

import { Component, Input, Output, EventEmitter } from '@angular/core';



@Component({

  selector: 'app-child',

  template: \`<button (click)="notify()">Notify Parent</button>\`

})

export class ChildComponent {

  @Input() data: string;

  @Output() notify = new EventEmitter<string>();



  notifyParent() {

    this.notify.emit('Message from child');

  }

}



@Component({

  selector: 'app-parent',

  template: \`<app-child [data]="parentData" (notify)="onNotify($event)"></app-child>\`

})

export class ParentComponent {

  parentData = 'Data from parent';



  onNotify(message: string) {

    console.log(message);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configure módulos con carga diferida y guardias de ruta en su módulo de enrutamiento:

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

import { RouterModule, Routes } from '@angular/router';

import { AuthGuard } from './auth.guard';



const routes: Routes = [

  {

    path: 'admin',

    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),

    canActivate: [AuthGuard]

  }

];



@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Proporcionar servicios a diferentes niveles utilizando @NgModule:

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

import { CommonModule } from '@angular/common';

import { MyService } from './my.service';



@NgModule({

  imports: [CommonModule],

  providers: [MyService]

})

export class FeatureModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Escuche eventos DOM usando @HostListener:

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



@Component({

  selector: 'app-host-listener',

  template: \`<p>Click me!</p>\`

})

export class HostListenerComponent {

  @HostListener('click', ['$event'])

  onClick(event: Event) {

    console.log('Element clicked:', event);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @ContentChild and @ContentChildren to query projected content:

import { Component, ContentChild, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

import { ContentComponent } from './content.component';



@Component({

  selector: 'app-container',

  template: \`<ng-content></ng-content>\`

})

export class ContainerComponent implements AfterContentInit {

  @ContentChild(ContentComponent) contentChild: ContentComponent;

  @ContentChildren(ContentComponent) contentChildren: QueryList<ContentComponent>;



  ngAfterContentInit() {

    console.log(this.contentChild);

    this.contentChildren.forEach(child => console.log(child));

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cargue componentes dinámicamente usando ComponentFactoryResolver:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

import { DynamicComponent } from './dynamic.component';



@Component({

  selector: 'app-dynamic',

  template: \`<ng-template #container></ng-template>\`

})

export class DynamicComponentLoader {

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;



  constructor(private cfr: ComponentFactoryResolver) {}



  loadComponent() {

    const factory = this.cfr.resolveComponentFactory(DynamicComponent);

    this.container.createComponent(factory);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Optimice el rendimiento utilizando ChangeDetectionStrategy.OnPush:

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



@Component({

  selector: 'app-optimization',

  template: \`<p>Change Detection Strategy</p>\`,

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class OptimizationComponent {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Detección de cambios de control con NgZone:

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



@Component({

  selector: 'app-ngzone',

  template: \`<p>NgZone Example</p>\`

})

export class NgZoneComponent {

  constructor(private ngZone: NgZone) {

    this.ngZone.runOutsideAngular(() => {

      setTimeout(() => {

        this.ngZone.run(() => console.log('Change detection triggered'));

      }, 1000);

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Realizar solicitudes HTTP utilizando HttpClient:

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

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

import { Observable } from 'rxjs';



@Component({

  selector: 'app-http',

  template: \`<p>HTTP Request Example</p>\`

})

export class HttpComponent {

  constructor(private http: HttpClient) {}



  getData(): Observable<any> {

    return this.http.get('https://api.example.com/data');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Definir proveedores de servicios en diferentes niveles:

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



@Injectable({

  providedIn: 'root' // Service provided at the root level

})

export class MyService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configurar proveedores de bibliotecas de terceros en @NgModule:

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

import { SomeLibraryModule, SomeService } from 'some-library';



@NgModule({

  imports: [SomeLibraryModule],

  providers: [SomeService]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Acceda a la ruta y consulte los parámetros usando Router:

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

import { ActivatedRoute } from '@angular/router';



@Component({

  selector: 'app-route',

  template: \`<p>Route Example</p>\`

})

export class RouteComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}



  ngOnInit() {

    this.route.paramMap.subscribe(params => {

      const id = params.get('id');

      console.log('Route parameter id:', id);

    });



    this.route.queryParamMap.subscribe(params => {

      const filter = params.get('filter');

      console.log('Query parameter filter:', filter);

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree directivas estructurales para manipular el diseño DOM:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';



@Directive({

  selector: '[appUnless]'

})

export class UnlessDirective {

  constructor(private templateRef: TemplateRef<any>, private vcr: ViewContainerRef) {}



  set appUnless(condition: boolean) {

    if (!condition) {

      this.vcr.createEmbeddedView(this.templateRef);

    } else {

      this.vcr.clear();

    }

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Controlar la encapsulación de vistas con encapsulation property:

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



@Component({

  selector: 'app-encapsulation',

  template: \`<p>View Encapsulation Example</p>\`,

  encapsulation: ViewEncapsulation.None // or Emulated, Native

})

export class EncapsulationComponent {}



            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Defina módulos raíz y de funciones en su aplicación:

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FeatureModule } from './feature/feature.module';



@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule, FeatureModule],

  bootstrap: [AppComponent]

})

export class AppModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Configure proveedores e importaciones en módulos de funciones:

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

import { CommonModule } from '@angular/common';

import { FeatureComponent } from './feature.component';

import { FeatureService } from './feature.service';



@NgModule({

  declarations: [FeatureComponent],

  imports: [CommonModule],

  providers: [FeatureService]

})

export class FeatureModule {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Gestionar dependencias jerárquicas utilizando @Injectable:

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



@Injectable({

  providedIn: 'root' // or 'platform', 'any'

})

export class HierarchicalService {}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

combinar ChangeDetectorRef and NgZone to control change detection:

import { Component, ChangeDetectorRef, NgZone } from '@angular/core';



@Component({

  selector: 'app-change-detection',

  template: \`<p>Change Detection Example</p>\`

})

export class ChangeDetectionComponent {

  constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone) {}



  triggerChangeDetection() {

    this.ngZone.run(() => this.cdr.detectChanges());

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @Inject to specify the token for dependency injection:

import { Injectable, Inject } from '@angular/core';

import { MY_TOKEN } from './tokens';



@Injectable({

  providedIn: 'root'

})

export class MyService {

  constructor(@Inject(MY_TOKEN) private myValue: string) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @Optional to inject dependencies that may or may not be provided:

import { Injectable, Optional } from '@angular/core';



@Injectable({

  providedIn: 'root'

})

export class MyService {

  constructor(@Optional() private optionalDependency?: SomeService) {}

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

implementar ngAfterViewInit to perform actions after the component's view has been initialized:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';



@Component({

  selector: 'app-after-view',

  template: \`<p #pElement>Content</p>\`

})

export class AfterViewComponent implements AfterViewInit {

  @ViewChild('pElement') pElement: ElementRef;



  ngAfterViewInit() {

    console.log(this.pElement.nativeElement.textContent);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso ngOnChanges to react to changes in input properties:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';



@Component({

  selector: 'app-on-changes',

  template: \`<p>{{inputProp}}</p>\`

})

export class OnChangesComponent implements OnChanges {

  @Input() inputProp: string;



  ngOnChanges(changes: SimpleChanges) {

    console.log('Changes:', changes);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

implementar ngDoCheck to customize change detection behavior:

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



@Component({

  selector: 'app-do-check',

  template: \`<p>Custom Change Detection</p>\`

})

export class DoCheckComponent implements DoCheck {

  ngDoCheck() {

    console.log('Custom change detection');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Inicializar datos usando ngOnInit:

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



@Component({

  selector: 'app-on-init',

  template: \`<p>Initialized Data: {{data}}</p>\`

})

export class OnInitComponent implements OnInit {

  data: string;



  ngOnInit() {

    this.data = 'Initial Data';

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso ngOnDestroy to perform cleanup tasks:

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



@Component({

  selector: 'app-on-destroy',

  template: \`<p>Cleanup Example</p>\`

})

export class OnDestroyComponent implements OnDestroy {

  ngOnDestroy() {

    console.log('Cleanup tasks');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Acceda a componentes secundarios o elementos DOM usando @ViewChild:

import { Component, ViewChild, ElementRef } from '@angular/core';



@Component({

  selector: 'app-view-child',

  template: \`<input #inputElement>\`

})

export class ViewChildComponent {

  @ViewChild('inputElement') inputElement: ElementRef;



  ngAfterViewInit() {

    this.inputElement.nativeElement.focus();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Consultar contenido proyectado usando @ContentChild:

import { Component, ContentChild, AfterContentInit } from '@angular/core';

import { ContentComponent } from './content.component';



@Component({

  selector: 'app-content-child',

  template: \`<ng-content></ng-content>\`

})

export class ContentChildComponent implements AfterContentInit {

  @ContentChild(ContentComponent) contentChild: ContentComponent;



  ngAfterContentInit() {

    console.log(this.contentChild);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Consulta múltiples elementos o componentes usando @ViewChildren and @ContentChildren:

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';

import { ChildComponent } from './child.component';



@Component({

  selector: 'app-view-children',

  template: \`<app-child></app-child><app-child></app-child>\`

})

export class ViewChildrenComponent implements AfterViewInit {

  @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;



  ngAfterViewInit() {

    this.children.forEach(child => console.log(child));

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso @HostBinding to bind properties to the host element:

import { Directive, HostBinding } from '@angular/core';



@Directive({

  selector: '[appHostBinding]'

})

export class HostBindingDirective {

  @HostBinding('class.highlight') isHighlighted = true;

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Escuche eventos en el elemento anfitrión usando @HostListener:

import { Directive, HostListener } from '@angular/core';



@Directive({

  selector: '[appHostListener]'

})

export class HostListenerDirective {

  @HostListener('mouseenter') onMouseEnter() {

    console.log('Mouse entered');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Cree una tubería personalizada para transformar datos:

import { Pipe, PipeTransform } from '@angular/core';



@Pipe({

  name: 'customPipe'

})

export class CustomPipe implements PipeTransform {

  transform(value: string): string {

    return value.toUpperCase();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso NgZone to control change detection:

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



@Component({

  selector: 'app-ng-zone',

  template: \`<p>NgZone Example</p>\`

})

export class NgZoneComponent {

  constructor(private ngZone: NgZone) {}



  runOutsideAngular() {

    this.ngZone.runOutsideAngular(() => {

      // Code that doesn't trigger change detection

    });

  }



  runInsideAngular() {

    this.ngZone.run(() => {

      // Code that triggers change detection

    });

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

uso Renderer2 for DOM manipulation:

import { Component, Renderer2, ElementRef } from '@angular/core';



@Component({

  selector: 'app-renderer',

  template: \`<p>Renderer2 Example</p>\`

})

export class RendererComponent {

  constructor(private renderer: Renderer2, private el: ElementRef) {}



  ngAfterViewInit() {

    this.renderer.setStyle(this.el.nativeElement.querySelector('p'), 'color', 'blue');

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

Activar manualmente la detección de cambios usando ChangeDetectorRef:

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



@Component({

  selector: 'app-change-detector',

  template: \`<p>Change Detection Example</p>\`

})

export class ChangeDetectorComponent {

  constructor(private cdr: ChangeDetectorRef) {}



  triggerChangeDetection() {

    this.cdr.detectChanges();

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.

implementar HttpInterceptor to intercept HTTP requests and responses:

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';



@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const authReq = req.clone({

      headers: req.headers.set('Authorization', 'Bearer token')

    });

    return next.handle(authReq);

  }

}

            

Nota práctica: En la práctica, aplíquelo con una responsabilidad bien delimitada, tipos explícitos y pruebas que cubran el caso correcto y los errores esperados. Evite acoplar esta decisión a detalles de la interfaz o de infraestructura; así el código será más fácil de mantener, reutilizar y evolucionar cuando cambien los requisitos de la aplicación.