docs: refactor pipe example to use the HttpClient (angular#22741)

PR Close angular#22741

Author: danielsogl

aio/content/examples/pipes/src/app/app.module.ts

@@ -1,26 +1,21 @@
 // #docregion
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import {
-  FlyingHeroesComponent,
-  FlyingHeroesImpureComponent
-} from './flying-heroes.component';
+import { ExponentialStrengthPipe } from './exponential-strength.pipe';
+import { FetchJsonPipe } from './fetch-json.pipe';
+import { FlyingHeroesComponent, FlyingHeroesImpureComponent } from './flying-heroes.component';
+import { FlyingHeroesImpurePipe, FlyingHeroesPipe } from './flying-heroes.pipe';
 import { HeroAsyncMessageComponent } from './hero-async-message.component';
 import { HeroBirthdayComponent } from './hero-birthday1.component';
 import { HeroBirthday2Component } from './hero-birthday2.component';
 import { HeroListComponent } from './hero-list.component';
-import { PowerBoosterComponent } from './power-booster.component';
 import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
-import {
-  FlyingHeroesPipe,
-  FlyingHeroesImpurePipe
-} from './flying-heroes.pipe';
-import { FetchJsonPipe } from './fetch-json.pipe';
-import { ExponentialStrengthPipe } from './exponential-strength.pipe';
+import { PowerBoosterComponent } from './power-booster.component';
+
 
 @NgModule({
   imports: [
@@ -43,6 +38,6 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
     FetchJsonPipe,
     ExponentialStrengthPipe
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [AppComponent]
 })
 export class AppModule { }

aio/content/examples/pipes/src/app/fetch-json.pipe.ts

@@ -1,13 +1,14 @@
 // #docregion
-import { Pipe, PipeTransform } from '@angular/core';
 import { HttpClient }          from '@angular/common/http';
+import { Pipe, PipeTransform } from '@angular/core';
+
 // #docregion pipe-metadata
 @Pipe({
   name: 'fetch',
   pure: false
 })
 // #enddocregion pipe-metadata
-export class FetchJsonPipe  implements PipeTransform {
+export class FetchJsonPipe implements PipeTransform {
   private cachedData: any = null;
   private cachedUrl = '';
 
@@ -17,7 +18,7 @@ export class FetchJsonPipe  implements PipeTransform {
     if (url !== this.cachedUrl) {
       this.cachedData = null;
       this.cachedUrl = url;
-      this.http.get(url).subscribe( result => this.cachedData = result );
+      this.http.get(url).subscribe(result => this.cachedData = result);
     }
 
     return this.cachedData;