Top 7 Less Known Angular Features Every Developer Should Know

Every developer knows that Angular is a powerful framework. However, there are some less-known features of Angular that every developer should know. 

Angular is a JavaScript framework that is used for building web applications. It is one of the most popular frameworks and is used by many big companies. Angular has many features that make it a great choice for web development.

It can help us by making our code more maintainable and testable. It can also help us improve the performance of our applications. 

1. Standalone Component

This is one of the latest features that Angular offers. The standalone component allows you to create a self-contained unit that can be used in any Angular application to create reusable components. 

Standalone components do not need any NgModule to be added in but it can work without the module. This is the main feature of the standalone component.

Along with standalone components, there are also standalone pipes and directives.

@Component({
  selector: 'app-book-list',
  standalone: true,
  imports: [CommonModule, RouterModule, MatButtonModule],
  template: `
    <section>
      <div class="grid-container">
        <ng-container *ngFor="let book of bookService?.books; let i = index">
          <div class="grid-item" [routerLink]="'/details/' + i">
            <h3>{{ book?.name }}</h3>
            <img width="200" height="200" [src]="book?.imageUrl" [alt]="book?.name"/>
            <div class="">
              <button  mat-raised-button>Add to cart</button>
            </div>
          </div>
        </ng-container>
      </div>
    </section>
  `,
  styles: [
  ],
})
export class BookListComponent implements OnInit {
  constructor(readonly bookService: BooksService) { }

  ngOnInit(): void { }
}

2. NgPlural

Ngplural is an Angular directive that can be used to display different content depending on the number of items in a collection.

For example, you could use NgPlural to display a message like "There are no items" if the collection is empty, or "There is 1 item" if the collection contains only one item.

In addition to displaying different content, depending on the number of items in a collection, NgPlural can also be used to pluralize text. For instance, if you wanted to display the message "You have 5 messages," you could use NgPlural to pluralize the word "message."

Overall, NgPlural is a useful directive that can help make your Angular apps more user-friendly.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  count :number = 5;
}

<span [ngPlural]="count">
     <ng-template ngPluralCase="2">there are 2 items.</ng-template>
     <ng-template ngPluralCase="one">there is one item.</ng-template>
     <ng-template ngPluralCase="=4">there are four items.</ng-template>
     <ng-template ngPluralCase="many">there are many items.</ng-template>
     <ng-template ngPluralCase="5">there are five items.</ng-template>
     <ng-template ngPluralCase="no">there are no items.</ng-template>
  </span> 

3. Document Property of Javascript

If you're working with Angular, you may need to access the Document Object Model (DOM). The document property is a global object that represents the HTML document.

You can use the document property to query and manipulate the DOM.

Example:

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
 
constructor(@Inject(DOCUMENT) documet: Document) {
  console.log(document)
}
 
renderImageElement() {
  this.document.getElementById("image")
}

4. Meta Tags in Angular

Meta tags are an important part of SEO (Search Engine Optimization) because they help search engines understand what a web page is about.

By including relevant keywords in meta tags, webmasters can improve their chances of ranking high in Search Engine Results Pages (SERPs).

While meta tags don't guarantee high SERP rankings, they are still a valuable tool for SEO in angular. In addition to helping with keyword research, meta tags can also help improve click-through rates (CTRs) from SERPs.

A well-optimized meta tag can attract users to your website and encourage them to click on your listing.

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

5. AppInitializer in Angular

An AppInitializer is a service provided by Angular that allows developers to run initialization code once the application has been bootstrapped. This is particularly useful for ensuring that certain modules are always loaded and for setting up a global state before the application begins.

AppInitializers are registered with Angular using the APP_INITIALIZER token. When an AppInitializer is executed, it will receive an injector as its first argument. This injector can be used to resolve dependencies needed by the initialization code.

Once all AppInitializers have been executed, Angular will begin running the application's bootstrap process.

 function runOnInitilization() {
    ...
}
@NgModule({
    providers: [
        { provide: APP_INITIALIZER, useFactory: runOnInitilization }
    ]
})

6. Strictly Typed Forms

Typed forms in Angular provide a way to enforce types on form values. This can be useful for making sure only certain values are allowed in a form, or for providing an extra type of safety when working with forms.

To use typed forms in Angular, you first need to create a class that represents the form's data. This class can be created manually or by using the Angular CLI.

Once you have the class set up, you need to add it to your component's providers array.

Once the class is added as a provider, you can use it in your template by specifying the type of each form control. This will automatically cast the value of the control to the correct type when submitting the form.

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
})
export class UserComponent {
  profileForm = new FormGroup({
    firstName: new FormControl('Akash'),
    lastName: new FormControl('chauhan'),
    mobile: new FormControl('099909888'),
    address: new FormGroup({
      street: new FormControl('32 street'),
      city: new FormControl('chandigarh'),
      state: new FormControl('Punjab'),
      zip: new FormControl('160019'),
    }),
  });

  populateName() {
    this.profileForm.controls.firstName.setValue('Akashminds');
  }
  

7. Template Interpolation

Template interpolation is a feature in Angular that allows you to insert variables into your HTML templates. This can be useful for displaying data from your database or for making your template more dynamic.

To use template interpolation, you first need to create a variable in your component class. 

Then, you can insert that variable into your template using the double-round braces syntax. (( variable )) instead of curly brackets like we usually use. {{ variable }}.

@component({
   selector: "app"
   interpolation: ["((","))"],
   template: '
    <hello name="(( name ))"> </hello>
   ',
   styleUrls: ["./app.component.css"]
})

export class AppComponent {
 name = "Angular " + VERSION.major;
}

Conclusion

Every Angular developer should make use of the lesser-known features of the framework to create more robust and error-free applications.

Utilizing these features will help developers avoid common mistakes, and make their code more readable and maintainable.

Angular includes many features that make development faster and easier.

With the release of Angular 14, there has been a lot of talk about its features. The framework includes many features that can help us with development, such as standalone components, strictly typed forms, and Angular CLI auto-completion.

Angular also provides a powerful toolset for creating reusable components. By taking advantage of these features, we can make our Angular apps faster and more responsive.