Less known Angular Features You Need to Know

Following are some interesting features of angular that can help you in SEO, application performance improvements, and improving code readability. 

1. Title tags: These are displayed on SERPs(Search Engine Results Pages) as the clickable & touchable heading for your search text. They’re important for usability, Search engine optimization and social platforms post sharing. 

For this, you have to import the Title from the @angular/platform-browser package and inject it into the constructor. With this, you can also set text dynamically.

Example:

Javascript

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

2. Meta tags: As we know meta tags are important for the indexing of a site to make it easily discovered on the internet. You can add these tags by using the addTag method.

For this First, you have to import meta property from the @angular/platform-browser package and inject it into the constructor. With this, you can add, update, remove meta tag properties.

Example:

Javascript

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"');
}

Output: This will render as the following:

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

These all are also Social meta tags for Twitter.

3. Template interpolation: Angular also gives the ability to Override the interpolation brackets. As we know by default the template interpolator is {{}} in our templates. It is used to display fields(properties) in the component.

Example:

Javascript

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

export class AppComponent { }

// Here we override this { } to ().
<hello name="{{ name }}"></hello>

Output: This will render as the following:

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

4. Location Service: With this, you can get the link from the address bar of the current browser window. It is simple to use as you just need to import Location from @angular/common package and inject it into the constructor.

Example:

Javascript

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. Document property of JS: If you want to use document methods then you firstly need to inject it in the constructor using inject decorator. It is preferred to not manipulate the DOM elements directly. If you directly do this, it can introduce XSS chances.

Example:

Javascript

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. Attribute decorator It is basically used to improve the performance of the application. As we know Input emitter will run on each change detection which affects the performance. So if you want to pass some data or string you can use an attribute decorator. It checks the property one time.

Example:

Javascript

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. App Initializer token: It is used when we need to do some initialization before loading our application like adding configurations, load cache, manage settings, or do some check-ins.

Example:

Javascript

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

function runSettingsOnInit() {
  // ...
}

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

8. App Bootstrap Listener: It enables us to listen to when a component is being bootstrapped. Add this in providers of NgModule decorator in the app module.

Example:

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