Funciones angulares menos conocidas que debe conocer

Las siguientes son algunas características interesantes de angular que pueden ayudarlo en SEO, mejoras en el rendimiento de la aplicación y mejora de la legibilidad del código. 

1. Etiquetas de título: se muestran en las SERP (páginas de resultados del motor de búsqueda) como el encabezado en el que se puede hacer clic y tocar para el texto de búsqueda. Son importantes para la usabilidad, la optimización de motores de búsqueda y el intercambio de publicaciones en plataformas sociales. 

Para esto, debe importar el Título del paquete @angular/platform-browser e inyectarlo en el constructor. Con esto, también puede establecer texto dinámicamente.

Ejemplo:

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

2. Metaetiquetas: como sabemos, las metaetiquetas son importantes para la indexación de un sitio para que sea fácil de descubrir en Internet. Puede agregar estas etiquetas mediante el método addTag .

Para esto Primero, debe importar la meta propiedad del paquete @angular/platform-browser e inyectarlo en el constructor. Con esto, puede agregar, actualizar y eliminar propiedades de etiquetas meta.

Ejemplo:

import { Meta, Title } from '@angular/platform-browser';
 
constructor(meta: Meta) {
  meta.addTag({ name: 'description',
    content: 'sample content of meta service' });
  const authorName = meta.getTag('name=author');
  console.log(authorName.content);
  meta.updateTag({
    name: 'twitter:description', content: sample description'
  });
  meta.removeTag('name="author"');
}

Salida: Esto se representará como lo siguiente:

<meta name="twitter:title" content="Your Website Title" />

Todas estas también son etiquetas meta sociales para Twitter.

3. Interpolación de plantilla: Angular también brinda la capacidad de anular los corchetes de interpolación. Como sabemos, por defecto, el interpolador de plantillas es {{}} en nuestras plantillas. Se utiliza para mostrar campos (propiedades) en el componente.

Ejemplo:

@Component({
  interpolation: ["((", "))"]
})
 
export class AppComponent { }
  
// Here we override this { } to ().
<hello name="{{ name }}"></hello>

Salida: Esto se representará como lo siguiente:

<hello name="(( name ))"></hello>

4. Servicio de ubicación: con esto, puede obtener el enlace desde la barra de direcciones de la ventana actual del navegador. Es fácil de usar, ya que solo necesita importar la ubicación desde el paquete @angular/common e inyectarlo en el constructor.

Ejemplo:

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()
  }
}

5. Propiedad de documento de JS: si desea utilizar métodos de documento, primero debe inyectarlo en el constructor utilizando el decorador de inyección. Se prefiere no manipular los elementos DOM directamente. Si haces esto directamente, puede introducir posibilidades de XSS.

Ejemplo:

import { DOCUMENT } from '@angular/common';
import { Component, Inject, VERSION } from '@angular/core';
 
constructor(@Inject(DOCUMENT) _doc: Document) {
  console.log(_doc)
}
 
renderCanvasElement() {
  this._doc.getElementById("canvas")
}

6. Decorador de atributos Se utiliza básicamente para mejorar el rendimiento de la aplicación. Como sabemos, el emisor de entrada se ejecutará en cada detección de cambio que afecte el rendimiento. Entonces, si desea pasar algunos datos o strings, puede usar un decorador de atributos. Comprueba la propiedad una vez.

Ejemplo:

import { Component, Attribute, Input } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<hello type="some string type"></hello>`,
})
 
export class AppComponent { }
 
@Component({
  selector: 'hello',
  template: `<h1>Hello</h1> Type: "{{myVar}}"`,
  styles: [`h1 { font-family: Lato; }`]
})
 
export class HelloComponent {
  constructor(@Attribute('type') public myVar: string) {
    console.log('Attributre =', myVar);
  }
}

7. Token de inicializador de la aplicación: se usa cuando necesitamos hacer alguna inicialización antes de cargar nuestra aplicación, como agregar configuraciones, cargar caché, administrar configuraciones o hacer algunos registros.

Ejemplo:

import { APP_INITIALIZER } from '@angular/core';
 
function runSettingsOnInit() {
  // ...
}
 
@NgModule({
  providers: [
    { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
  ]
})

8. App Bootstrap Listener:  Nos permite escuchar cuando un componente se está arrancando. Agregue esto en proveedores del decorador NgModule en el módulo de la aplicación.

Ejemplo:

import { APP_BOOTSTRAP_LISTENER } from '@angular/core';
@NgModule({
 {
  provide: APP_BOOTSTRAP_LISTENER, multi: true,
  useExisting: runOnBootstrap 
 }
 // ...
})