# Activity #12: Research Angular

#### **Instructions:**

**Definition of Angular Pipes:**

**Pipes** in Angular are like Swiss Army knives for your template expressions. They allow you to transform data declaratively, making your UI more delightful and user-friendly. Think of them as filters (à la AngularJS) that take input and produce a modified output. Here’s the lowdown:

* **Purpose**: Pipes let you declare a transformation function once and then reuse it across multiple templates.
    
* **Syntax**: Angular pipes use the vertical bar character (`|`), inspired by Unix pipes.
    
* **Example**: **HTML**
    
* ```xml
    
      {{ today | date: 'fullDate' }}
    ```
    
* **Built-in Pipes**
    
    Angular comes with the following pipes:
    
    * The `AsyncPipe` lets us take the resolve value of promises or observables and display them on the screen.
        
    * `CurrencyPipe` lets us format numbers into a currency value for displaying on the screen.
        
    * `DatePipe` lets us format dates.
        
    * `I18PluralPipe` lets us get the plural version of a word for a given locale and display it.
        
    * `I18nSelectPipe` returns a value that corresponds to a given string and shows that.
        
    * `JsonPipe` lets us show JSON objects on the screen, which is helpful for debugging.
        
    * `KeyValuePipe` lets us get the keys and the corresponding values in a new object so that we can get them and display them on the screen.
        
    * `LowerCasePipe` returns a string converted to all lower case.
        
    * `PercentPipe` converts a decimal number into a locale specific percentage value.
        
    * `SlicePipe` returns a subset of the elements in an array or string.
        
    * `TitleCasePipe` converts a string into title case.
        
    * `UpperCasePipe` converts a string into upper case.
        
    
    ## Usage of Each Pipe
    
    We can put pipes in the curly brace after the pipe `|` sign.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = 100;
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | currency}}</p>
    ```
    
    HTML
    
    to format value `x` into a currency value with the `currency` pipe in the `app.component.html` template.
    
    As a result, we see `$100.00` displayed.
    
    ### AsyncPipe
    
    The `AsyncPipe` lets us get the resolved value of a promise and display it.
    
    To use it, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: Promise<string> | null = Promise.resolve("hello world");
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | async}}</p>
    ```
    
    HTML
    
    We assigned `x` to a promise which has a resolved value `'hello world'`. And to display that, we use the `async` pipe with `x` to get the value and display it.
    
    Likewise, we can use it with an observable by writing:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    import { Observable, of } from "rxjs";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: Observable<string> | null = of("hello world");
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | async}}</p>
    ```
    
    HTML
    
    We assigned `x` to an observable returned by `of`, which returns an observable that returns the value of the value we pass into it as an argument.
    
    Therefore, we get the same result.
    
    ### CurrencyPipe
    
    The currency pipe lets us format a number into a currency value.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = 100;
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | currency:'CAD':'symbol':'4.2-3':'en'}}</p>
    ```
    
    HTML
    
    to format 100 into a currency with the `currency` pipe\`.
    
    The first argument is `'CAD'`, which is the currency to format to.
    
    `symbol` is the second argument and means we show the currency symbol.
    
    The third string is the format of the number. The first number is the minimum number of integer digits. The second number is the minimum number of fraction digits. And the last number is the maximum number of fraction digits.
    
    The last argument is the locale string.
    
    Arguments passed into pipes are separated by colons.
    
    ### DatePipe
    
    We can use the `DatePipe` to format numbers to be displayed on the screen.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = new Date(2023, 1, 3, 1, 1, 1);
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | date: 'YYYY-MM-dd h:mm:ss a'}}</p>
    ```
    
    HTML
    
    to assign `x` to a date.
    
    Then we use the `date` pipe by passing in a date format string as its argument.
    
    The string has codes that represent various formats.
    
    * `YYYY` formats the year to a four or more digits year.
        
    * `MM` formats the month into a two-digit month.
        
    * `dd` formats the day of the month into a two-digit number.
        
    * `h` formats the hour with the minimum digits  
        required.
        
    * `mm` formats the minutes into a two-digit number.
        
    * `ss` formats the seconds into a two-digit number.
        
    * And `a` formats the time period into `AM` or `PM`.
        
    
    As result, `2023-02-03 1:01:01 AM` should be displayed since the 1 in the second argument of the `Date` constructor is February.
    
    ### DecimalPipe
    
    The `DecimalPipe` lets us format a number into the format we want.
    
    To use it, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = 100.88;
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | number: '1.0-1'}}</p>
    ```
    
    HTML
    
    The argument is the format of the number. The first number is the minimum number of integer digits. The second number is the minimum number of fraction digits. And the last number is the maximum number of fraction digits.
    
    Therefore, `100.9` is displayed since the maximum number of fractional digits is 1. Therefore 100.88 is rounded to 100.9.
    
    ### I18nPluralPipe
    
    We can use the `I18nPluralPipe` to get the plural version of a word.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = 1;
      mapping: { [k: string]: string } = {
        "=0": "No bottles.",
        "=1": "One bottle.",
        other: "# bottles."
      };
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{ x | i18nPlural: mapping }}</p>
    ```
    
    HTML
    
    to map the value of `x` into the plural value to display.
    
    If `x` is 0, then we see `'No bottles.'`. If `x` is 1, then we see `'One bottle.'`. Otherwise, we see the value of `x` followed by `'bottles.'`.
    
    Therefore, we see `'One bottle.'` since `x` is 1.
    
    ### I18nSelectPipe
    
    `I18nSelectPipe` lets us display a string that corresponds to a given value.
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = "female";
      mapping: { [k: string]: string } = {
        male: "Tell him.",
        female: "Tell her.",
        other: "Tell them."
      };
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{ x | i18nSelect: mapping }}</p>
    ```
    
    HTML
    
    to convert `x` to one of the values listed in the `mapping` object.
    
    If `x` is `'male'`, then we see `'Tell him.'`. If `x` is `'female'`, then we see `'Tell her.'`. Otherwise, we see `'Tell them.'`
    
    Therefore, we see `'Tell her.'` since `x` is `'female'`.
    
    ### JsonPipe
    
    We can use the `JsonPipe` to show the value of an object in our component template.
    
    To use it, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: { [k: string]: number } = {
        foo: 1,
        bar: 2,
        baz: 3
      };
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{ x | json }}</p>
    ```
    
    HTML
    
    to define the object `x` in `AppComponent`.
    
    Then we display the object’s value by using the `json` pipe.
    
    As a result, we see `{ "foo": 1, "bar": 2, "baz": 3 }` displayed.
    
    Without the `json` pipe, we see `[object Object]` on the screen.
    
    ### KeyValuePipe
    
    The `KeyValuePipe` pipe lets us get the keys and values of an object as an iterable object so we can loop through and render the entries.
    
    For example, we write:
    
    **app.component.ts**
    
    ```ts
    import { KeyValue } from "@angular/common";
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: { [k: string]: number } = {
        foo: 1,
        bar: 2,
        baz: 3
      };
      sortValues(a: KeyValue<string, number>, b: KeyValue<string, number>) {
        return a.value - b.value;
      }
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p *ngFor="let item of x | keyvalue: sortValues">
      {{item.key}}:{{item.value}}
    </p>
    ```
    
    HTML
    
    to define the `x` object and the `sortValues` comparator method to let us sort the `KeyValue` pairs by the `value` of each pair.
    
    Then we use the `keyvalue` pipe with the `sortValues` comparator method to sort the key-value pairs by the values.
    
    Therefore, we see:
    
    ```xml
    foo:1
    
    bar:2
    
    baz:3
    ```
    
    ### LowerCasePipe
    
    The `LowerCasePipe` lets us convert a string to all lower case.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: string = "The quick brown fox jumps over the lazy dog ";
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | lowercase}}</p>
    ```
    
    HTML
    
    to use the `lowercase` to convert string `x` to lower case and display it.
    
    Therefore, we see `the quick brown fox jumps over the lazy dog` displayed.
    
    ### PercentPipe
    
    The `PercentPipe` lets us format a number into a percentage value.
    
    To use it, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = 0.88888;
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | percent: '1.0-1': 'en'}}</p>
    ```
    
    HTML
    
    The first string is the format of the number. The first number is the minimum number of integer digits. The second number is the minimum number of fraction digits. And the last number is the maximum number of fraction digits.
    
    The second value is the locale string.
    
    Therefore, we see 88.9% displayed since we specified that the formatted value should have a maximum 1 decimal digit.
    
    ### SlicePipe
    
    The `SlicePipe` lets us return a slice of an array or string and render it.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x = [1, 2, 3, 4, 5, 6, 7, 8];
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p *ngFor="let i of x | slice:1:6">{{i}}</p>
    ```
    
    HTML
    
    to use the `slice` pipe with the start and end index of the slice to return the slice of `x` from index 1 to 5 inclusive.
    
    As a result, we see:
    
    ```xml
    2
    
    3
    
    4
    
    5
    
    6
    ```
    
    ### TitleCasePipe
    
    The `TitleCasePipe` lets us convert a string to title case.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: string = "The quick brown fox jumps over the lazy dog ";
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | titlecase}}</p>
    ```
    
    HTML
    
    to use the `titlecase` to convert string `x` to lower case and display it.
    
    Therefore, we see `The Quick Brown Fox Jumps Over The Lazy Dog` displayed.
    
    ### UpperCasePipe
    
    The `UpperCasePipe` lets us convert a string to title case.
    
    For instance, we write:
    
    **app.component.ts**
    
    ```ts
    import { Component } from "@angular/core";
    
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      x: string = "The quick brown fox jumps over the lazy dog ";
    }
    ```
    
    TypeScript
    
    **app.component.html**
    
    ```html
    <p>{{x | uppercase}}</p>
    ```
    
    HTML
    
    to use the `uppercase` to convert string `x` to lower case and display it.
    
    Therefore, we see `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG` displayed.
    
    **Conclusion**
    
    Pipes let us render items in component templates in the way we want. Angular comes with a few built-in pipes to let us render numbers and string values in a locale-specific format.
    
    Also, we can use pipes to get a slice of arrays or strings and to get values returned from promises and observables.
    
      
    **REFFERENCE:**
    
* [https://www.telerik.com/blogs/angular-basics-built-pipes-examples-each](https://www.telerik.com/blogs/angular-basics-built-pipes-examples-each)