In this article, I will talk about some interesting features of angular that you can use in your application to make your code more standardized. These angular features can also help you in SEO, application performance improvements and in improving code readability.
Here is the list of less known features-
1- Title tag
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 platform browser and inject it into the constructor.
With this, you can also set text dynamically.
Example-
import { Title } from “@angular/platform-browser”
@Component({
…
})
export class LoginComponent implements OnInit {
constructor(private title: Title) {}
ngOnInit() {
this.title.setTitle(“Login”)
}
}2- meta tag
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-
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”’);
}
This will render as below
<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-
@Component({
interpolation: [“((“,”))”]
})export class AppComponent {}Here we override this {} to ().
<hello name=”{{ name }}”></hello>
Usage in component-
<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. you just need to import Location from @angular/common package and inject it into the constructor.
Example-
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-
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-
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- AppInitialzer token
It is used when we need to do some initialization before loading our application like adding configurations, loading cache, managing settings or doing some check-ins.
Setup-
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
}
…
})Other important resources-
https://www.instagram.com/p/CF9DZNUgwRf/
Please clap it, share it and follow me for more updates. Leave a comment below, and let me know what you think!
