10 funciones útiles de Angular que probablemente nunca hayas utilizado

Después de haber pasado tanto tiempo escribiendo aplicaciones Angular, probablemente estés convencido de que lo has visto todo. Para estar 100% seguro sigue leyendo 😃

Además de nuestra lista de características de Angular, no podemos pasar por alto una herramienta. Bit (Github) hace que sea muy fácil compartir y colaborar en componentes Angular a través de proyectos. Úsalo para mantener una interfaz de usuario consistente, acelerar el desarrollo y minimizar los errores en el código.

Título

Una etiqueta de título es un elemento HTML que especifica el título de una página web. Las etiquetas de título se muestran en las páginas de resultados de los motores de búsqueda (SERP) como el titular en el que se puede hacer clic para un resultado determinado. Son cruciales para la usabilidad, el SEO y el intercambio social.

Las aplicaciones Angular establecen el título en la ventana del navegador desde el  en el index.html. Navegar a componentes en Angular no cambia el título.

Sabías que..  puedes establecer el título del navegador desde los componentes?

Angular tiene un servicio Title en @angular/platform-browser. Simplemente inyectamos el servicio Title en nuestros componentes y usamos el método setTitle para establecer el título.

import { Title } from "@angular/platform-browser"
@Component({
    ...
})
export class LoginComponent implements OnInit {
    constructor(private title: Title) {}
    ngOnInit() {
        title.setTitle("Login")
    }
}

Cuando naveguemos al LoginComponent el título del navegador se establecerá en "Login"

Podemos repetir eso en todos los componentes de nuestro proyecto para que cuando se navegue a ellos, la ventana del navegador se cambie para reflejar el título del componente.

Meta

Nuestra app Angular renderiza cosas que son en su mayoría del index.html. Las etiquetas meta que tendrá nuestra app es la establecida en el index.html. Angular tiene un servicio Meta en el @angular/platform-browser que nos permite establecer meta tags desde nuestros componentes.

Esto es muy útil a la hora de buscar en términos de SEO y compartir la página que tiene el componente a los medios sociales.

Según Wikipedia:

Los meta elementos son etiquetas utilizadas en documentos HTML y XHTML para proporcionar metadatos estructurados sobre una página Web. Forman parte de la sección head de una página web. En una misma página pueden utilizarse varios metaelementos con distintos atributos.

Los metaelementos pueden utilizarse para especificar la descripción de la página, palabras clave y cualquier otro metadato que no se proporcione a través de los demás elementos y atributos de la cabecera.

También proporcionan información sobre la página web, que puede ser utilizada por los motores de búsqueda para ayudar a categorizar la página correctamente.

Su uso es muy sencillo, basta con importar Meta desde @angular/platform-browser e inyectarlo en nuestro componente.

import { Meta } from "@angular/platform-browser"
@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}
    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

Con esto nuestro BlogComponent puede ser renderizado en Facebook, Twitter, etc describiendo nuestro componente, proporcionando títulos, imágenes y descripciones.

¿Has oído hablar de esto también?

Anular la interpolación de plantillas

Todos usamos el interpolador de plantillas por defecto {{}} en nuestras plantillas para mostrar propiedades en el componente.

El inicio es {{ y el final }}. Si colocamos un miembro de la propiedad entre ellos se mostrará en el DOM del navegador.

¿Sabes que podemos sobreescribir los delimitadores de inicio y fin de encapsulación por defecto con nuestros propios símbolos? Es sencillo, especifícalo en la propiedad interpolation del decorador Component

@Component({
    interpolation: ["((","))"]
})
export class AppComponent {}

La interpolación a utilizar en la plantilla del AppComponent será "(())" ya no "{{}}".

@Component({
    template: `
        <div>
            ((data))
        </div>
    `,
    interpolation: ["((","))"]
})
export class AppComponent {
    data: any = "dataVar"
}

Al renderizar "dataVar" se renderizará en lugar de ((data)).

Localización

Podemos obtener la URL de la ventana actual del navegador utilizando el servicio Location. Dependiendo de la LocationStrategy utilizada, Location persistirá en la ruta de la URL o en el segmento hash de la URL.

Con Location, podemos ir a una URL, navegar hacia adelante en el historial de la plataforma, navegar hacia atrás en el historial de la plataforma, cambiar la URL del navegador, reemplazar el elemento superior en la pila del historial de la plataforma.

Inyectamos el servicio Location desde el CommonModule para utilizarlo.

import { Location } from "@angular/common"
@Component({
    ...
})
export class AppComponent {
    constructor(private location: Location) {}
    navigateTo(url) {
        this.location.go(url)
    }
    goBack() {
        location.back()
    }
    goForward() {
        location.forward()
    }
}

DOCUMENTO

A veces queremos obtener el modelo del documento para poder realizar operaciones DOM desde nuestra aplicación Angular.

El DOCUMENT proporciona precisamente eso. DOCUMENT es un DI Token que representa el contexto de renderizado principal. En un navegador, este es el documento DOM. Proporciona operaciones DOM de forma independiente del entorno.

Nota: Document puede no estar disponible en el Contexto de Aplicación cuando los Contextos de Aplicación y de Renderizado no son el mismo (por ejemplo, cuando se ejecuta la aplicación en un Web Worker).

Digamos que tenemos un elemento en nuestro html:

<canvas id="canvas"></canvas>

Podemos hacernos con el HTMLElement del lienzo inyectando DOCUMENTO:

@Component({
})
export class CanvasElement {
    constructor(@Inject(DOCUMENT) _doc: Document) {}
}

Podemos entonces obtener el HTMLElement del canvas llamando a getElementById()

@Component({
})
export class CanvasElement {
    constructor(@Inject(DOCUMENT) _doc: Document) {}
    renderCanvas() {
        this._doc.getElementById("canvas")
    }
}

Podemos hacer esto de forma segura usando ElementRef y template reference pero ya tienes la idea.

Atención: ¡Ten cuidado! Interactuar con el DOM directamente es peligroso y puede introducir riesgos XSS.

Decorador @Attributo

Hemos utilizado principalmente: Component, Module, Directive decorators en nuestra app Angular.

Tenemos este decorador Attribute, que nos permite pasar una cadena estática sin un coste en el rendimiento eliminando la comprobación de detección de cambios en ella.

Los valores del decorador Attribute se comprueban una vez y nunca más. Se utilizan de forma similar al decorador @Input:

@Component({
    ...
})
export class BlogComponent {
    constructor(@Attribute("type") private type: string ) {}
}

HttpInterceptor

Muy parecido a un caza-interceptor estadounidense, esta es una característica muy potente en Angular. Intercepta HttpRequest y los maneja.

La mayoría de los interceptores transformarán la petición saliente antes de pasarla al siguiente interceptor de la cadena, llamando a next.handle (transformedReq)

En raras ocasiones, los interceptores pueden querer manejar completamente una petición ellos mismos, y no delegar en el resto de la cadena. Este comportamiento está permitido.

HttpInterceptor se puede utilizar en:

• Autenticación
• Almacenamiento en caché
• Falsificación de backend
• Transformación de URL
• Modificación de cabeceras

Es sencillo de usar, primero crea un servicio e implementa la interfaz HttpInterceptor.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
    constructor() {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        ...
    }
}

A continuación, insértalo en tu módulo principal:

@NgModule({
    ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MockBackendInterceptor,
            multi: true
        }
    ]
    ...
})
export class AppModule {}

AppInitializer

A veces queremos que un trozo de código se ejecute cuando nuestra aplicación Angular se está iniciando, tal vez cargar algunos ajustes, cargar caché, cargar configuraciones o hacer algunos check-ins. El token AppInitialzer ayuda con eso.

APP_INITIALIZER

Una función que se ejecutará cuando se inicialice una aplicación.

Es fácil de usar. Supongamos que queremos que esta función runSettings se ejecute al iniciar nuestra aplicación Angular:

function runSettingsOnInit() {
    ...
}

Vamos a nuestro módulo principal, AppModule y lo añadimos a la sección providers en su decorador NgModule:

@NgModule({
    providers: [
        { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
    ]
})

Listener de Bootstrap

Al igual que AppInitializer, Angular tiene una característica que nos permite escuchar cuando un componente está siendo bootstrapped. Es el APP_BOOTSTRAP_LISTENER.

Todos los callbacks proporcionados a través de este token serán llamados por cada componente que es bootstrapped.

Tenemos muchas razones para escuchar a los componentes bootstrapping, por ejemplo, el módulo Router lo utiliza para destruir y crear componentes basados en la navegación de la ruta.

Para usar APP_BOOTSTRAP_LISTENER, lo añadimos a la sección providers en nuestro AppModule con la función callback:

@NgModule({
    {
        provide: APP_BOOTSTRAP_LISTENER, multi: true, 
        useExisting: runOnBootstrap
    }
    ...
})
export class AppModule {}

NgPlural

La pluralización es un problema en su ámbito. Necesitamos definir siempre correctamente la gramática en nuestras aplicaciones basándonos en el valor singular/plural. Algunas webs utilizan la (s). Por ejemplo:

1 component(s) removed
3 component(s) removed

:) Depende del lector quitar (s) o añadir (s) al leerlo :)

Angular se ocupa de este problema por nosotros en su directiva NgPlural.

NgPlural añade/elimina subárboles DOM basándose en un valor numérico. Adaptado para la pluralización.

Muestra los subárboles DOM que coinciden con el valor de la expresión switch, o en su defecto, los subárboles DOM que coinciden con la categoría de pluralización de la expresión switch.

Para utilizar esta directiva, debe proporcionar un elemento contenedor que establezca el atributo [ngPlural] en una expresión de conmutación. Los elementos internos con [ngPluralCase] se mostrarán en función de su expresión:

<p [ngPlural]="components">
    <ng-template ngPluralCase="=1">1 component removed</ng-template>    
    <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>    
</p>

Mira, hemos utilizado la directiva NgPlural para eliminar la (s) cuando se muestra el número de "componentes eliminados". Se mostrará:

// if 1 component
1 component removed
// if 5 components
5 components removed

Conclusión

Angular es enorme y complejo. Intenta buscar en las fuentes de Angular a ver si puedes olfatear características nunca antes oídas o escritas. Estaré esperando tus hallazgos.  😁

Fuente