Angular 8 tips and tricks

There are many concepts and little nuggets of wisdom that you need to comprehend when working with Angular. Here I’ll list some of the lessons learned while working with it.

Note: Examples in this article use Angular 7+.

Using an Angular pipe right inside a class

Let’s first define a pipe that replaces all instances of a character found in a string, with another one.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'oneCharToAnother'})
export class OneCharToAnother implements PipeTransform {
  transform(str: string): string {
    const replaceStr = '_';
    const replacementStr = ' ';
    return str.replace(new RegExp(replaceStr, 'g'), replacementStr);
  }
}

Next, we’ll use the above pipe in a module; first we’ll import it:

import { OneCharToAnother } from '../oneCharToAnother.pipe';

Then, we’ll add it to the declarations array:

@NgModule({
  declarations: [
    // code skipped for brevity
    OneCharToAnother
  ],

Next, inside a component class, we’ll first import it:

import { OneCharToAnother } from 'src/app/oneCharToAnother.pipe';

Then, we’ll add it to the component as a provider:

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css'],
  providers: [OneCharToAnother]
})

Now we need to apply it to a value.

Let’s say our value is a part of a form builder. If we say our value, fore example, looks like this:

value: [this.general.value, [Validators.required]],

We can now update it to this:

value: [this.oneCharToAnother.transform(this.general.value), [Validators.required]],

As we can see in the above example, we’re taking a value, and we’re passing it to the transform method of our pipe:

this.oneCharToAnother.transform(value)

That’s how to add a pipe to a class in Angular 2+.

Could not find a declaraton file for module in Angular

Most of the declaration types for npm modules are already written and you can include them using npm install @types/module_name (where module_name is the name of the module whose types you wanna include).

Import a module globally to your app (quickly)

For example, we install a new module:

npm i hammerjs --save

Next, we make it available globally by simply importing it inside main.ts at the root of our Angular app’s folder:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs'; // IMPORT GOES HERE!

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

That’s it for now. This is a brand new article, and I’ll be adding to this list whenever I come across some interesting tip / technique to write about.