Merge pull request #2 from actionanand/features/1-angular-pipes

Features/1 angular pipes

README.md

@@ -225,3 +225,5 @@ To configure the pre-commit hook, simply add a `precommit` npm script. We want t
 - [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
 - [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)
 - [Angular Pipes Deep Dive - GitHub](https://github.com/actionanand/Angular-study-Pipes)
+- [Reference vs Primitive Values - Academind](https://academind.com/tutorials/reference-vs-primitive-values)
+- [JavaScript Sort() – How to Use the Sort Function in JS](https://www.freecodecamp.org/news/how-does-the-javascript-sort-function-work/)

src/app/app.component.html

@@ -6,13 +6,13 @@
       <img src="temp-icon.png" alt="Thermometer icon" />
       <div>
         <h2>Current Temperatures</h2>
-        <p>{{ currentDate }}</p>
+        <p>{{ currentDate | date: 'medium' }}</p>
       </div>
     </header>
-    <p>New York: {{ currentTemperaturs.newYork }}</p>
-    <p>Berlin: {{ currentTemperaturs.berlin }}</p>
-    <p>Paris: {{ currentTemperaturs.paris }}</p>
-    <p>Chicago: {{ currentTemperaturs.chicago }}</p>
+    <p>New York: {{ currentTemperaturs.newYork | temp: 'fah' : 'cel' }}</p>
+    <p>Berlin: {{ currentTemperaturs.berlin | temp: 'cel' }}</p>
+    <p>Paris: {{ currentTemperaturs.paris | temp: 'fah' }}</p>
+    <p>Chicago: {{ currentTemperaturs.chicago | temp: 'fah' : 'cel' }}</p>
   </article>
 
   <article class="temperatures">
@@ -24,8 +24,8 @@ <h2>Historic Temperatures</h2>
       </div>
     </header>
     <ul>
-      @for (temperature of historicTemperatures; track temperature) {
-        <li (click)="onReset($index)">{{ temperature }}</li>
+      @for (temperature of historicTemperatures | sort; track temperature) {
+        <li (click)="onReset($index)" [style]="{ cursor: 'pointer' }">{{ temperature | tempOddEven: $odd }}</li>
       }
     </ul>
   </article>

src/app/app.component.ts

@@ -1,8 +1,14 @@
+import { DatePipe } from '@angular/common';
 import { Component } from '@angular/core';
 
+import { TempPipe } from './shared/pipes/temp.pipe';
+import { TempOddEvenPipe } from './shared/pipes/temp-odd-even.pipe';
+import { SortPipe } from './shared/pipes/sort.pipe';
+
 @Component({
   selector: 'app-root',
   standalone: true,
+  imports: [DatePipe, TempPipe, TempOddEvenPipe, SortPipe],
   templateUrl: './app.component.html',
 })
 export class AppComponent {
@@ -17,6 +23,14 @@ export class AppComponent {
   historicTemperatures = [25, 37, 19, -4, 28, 21, 19, 28, 33, 31, 9, 11, 5, -12, -5];
 
   onReset(index: number) {
+    // sort Pipe won't run with 'pure'
     this.historicTemperatures[index] = 18;
+
+    // Sort Pipe will run
+    /*
+    const temp = [...this.historicTemperatures];
+    temp[index] = 18;
+    this.historicTemperatures = temp;
+    */
   }
 }

src/app/shared/pipes/sort.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sort',
+  standalone: true,
+  pure: false,
+})
+export class SortPipe implements PipeTransform {
+  transform(value: string[] | number[], direction: 'asc' | 'des' = 'asc') {
+    const sorted = [...value];
+    sorted.sort((a, b) => {
+      if (direction === 'asc') {
+        return a > b ? 1 : -1;
+      } else {
+        return a > b ? -1 : 1;
+      }
+    });
+    return sorted;
+  }
+}

src/app/shared/pipes/temp-odd-even.pipe.ts

@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'tempOddEven',
+  standalone: true,
+})
+export class TempOddEvenPipe implements PipeTransform {
+  transform(value: string | number, isOdd: boolean): string {
+    let val: number;
+    let outputTemp: number;
+    let symbol: '°F' | '°C';
+
+    if (typeof value === 'string') {
+      val = parseFloat(value);
+    } else {
+      val = value;
+    }
+
+    if (isOdd) {
+      outputTemp = val * (9 / 5) + 32;
+      symbol = '°F';
+    } else {
+      outputTemp = (val - 32) * (5 / 9);
+      symbol = '°C';
+    }
+
+    return `${outputTemp.toFixed(2)} ${symbol}`;
+  }
+}

src/app/shared/pipes/temp.pipe.ts

@@ -0,0 +1,35 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'temp',
+  standalone: true,
+})
+export class TempPipe implements PipeTransform {
+  transform(value: string | number, inputType: 'cel' | 'fah', outputType?: 'cel' | 'fah'): string {
+    let val: number;
+    let outputTemp: number;
+    let symbol: '°F' | '°C';
+
+    if (typeof value === 'string') {
+      val = parseFloat(value);
+    } else {
+      val = value;
+    }
+
+    if (inputType === 'cel' && outputType === 'fah') {
+      outputTemp = val * (9 / 5) + 32;
+    } else if (inputType === 'fah' && outputType === 'cel') {
+      outputTemp = (val - 32) * (5 / 9);
+    } else {
+      outputTemp = val;
+    }
+
+    if (!outputType) {
+      symbol = inputType === 'cel' ? '°C' : '°F';
+    } else {
+      symbol = outputType === 'cel' ? '°C' : '°F';
+    }
+
+    return `${outputTemp.toFixed(2)} ${symbol}`;
+  }
+}