-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Workflow
committed
Jan 31, 2024
1 parent
e206c8a
commit b3fd4dc
Showing
6 changed files
with
48 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -671,8 +671,14 @@ <h2>Problem</h2> | |
| <p><img src="../static/img/angular/3b-creating-pipes/restaurant-thumbnails.png" | ||
| style="border: solid 1px black; max-width: 320px;"/></p> | ||
| <p>Currently the path is written out like:</p> | ||
| <pre><code class="language-html"><img src="{{ restaurant.images.thumbnail }}" width="100" height="100" /> | ||
| <pre><code class="language-html"><img | ||
| alt="" | ||
| src="{{ restaurant.images.thumbnail }}" | ||
| width="100" | ||
| height="100" | ||
| /> | ||
| </code></pre> | ||
| <div line-highlight='3'></div> | ||
| <p><code>restaurant.images.thumbnail</code> will be a path like <code>node_modules/place-my-order-assets/image.png</code>. We need to change that path to be more like <code>./assets/image.png</code>. Once | ||
| the path rewriting is fixed, images will show up correctly.</p> | ||
| <h2>What You Need to Know</h2> | ||
|
|
@@ -688,7 +694,7 @@ <h2>How to Generate a Pipe via the CLI</h2> | |
| <h2>How to Build a Pipe</h2> | ||
| <p><a href="https://angular.io/guide/pipes">Angular Pipes</a> come in handy to transform content in our templates. Pipes allow us to transform data to display to the user in our HTML without modifying the original source.</p> | ||
| <p>Angular comes with several built-it pipes like DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. These pipes can be used in templates to modify the way data displays. We can build custom pipes as well. Pipes require one parameter - the value we want to change, but can take an additional parameters as well.</p> | ||
| <p>This example takes the value to be transformed and a parameter to use as an exponential multiplier.</p> | ||
| <p>This example takes a price to be transformed and a parameter to use as the currency symbol.</p> | ||
| <pre><code class="language-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"/></script> | ||
| <script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"/></script> | ||
|
|
@@ -703,18 +709,18 @@ <h2>How to Build a Pipe</h2> | |
| const { Component, VERSION, Pipe, PipeTransform } = ng.core; | ||
|
|
||
|
|
||
| @Pipe({name: 'exponentialStrength'}) | ||
| class ExponentialStrengthPipe implements PipeTransform { | ||
| transform(value: number, exponent: number): number { | ||
| return Math.pow(value, isNaN(exponent) ? 1 : exponent); | ||
| @Pipe({ name: 'currencyFormat' }) | ||
| export class CurrencyFormatPipe implements PipeTransform { | ||
| transform(value: number, symbol: string = '$'): string { | ||
| return `${symbol}${value / 100}`; | ||
| } | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'my-app', | ||
| template: ` | ||
| <h2>Power Booster</h2> | ||
| <p>Super power boost: {{2 | exponentialStrength: 10}}</p> | ||
| <h2>Prices</h2> | ||
| <p>USD price: {{ 1522 | currencyFormat:'$' }}</p> | ||
| ` | ||
| }) | ||
| class AppComponent { | ||
|
|
@@ -730,7 +736,7 @@ <h2>How to Build a Pipe</h2> | |
| @NgModule({ | ||
| imports: [ BrowserModule, | ||
| CommonModule], | ||
| declarations: [AppComponent, ExponentialStrengthPipe], | ||
| declarations: [AppComponent, CurrencyFormatPipe], | ||
| bootstrap: [AppComponent], | ||
| providers: [] | ||
| }) | ||
|
|
@@ -751,8 +757,14 @@ <h2>Technical Requirements</h2> | |
| <ol> | ||
| <li>Use an <code>imageUrl</code> <strong>pipe</strong> in <strong>src/app/restaurant/restaurant.component.html</strong> to rewrite the path. Using a pipe looks like the following:</li> | ||
| </ol> | ||
| <pre><code class="language-html"><img src="{{ restaurant.images.thumbnail | imageUrl }}" /> | ||
| <pre><code class="language-html"><img | ||
| alt="" | ||
| src="{{ restaurant.images.thumbnail }}" | ||
| width="100" | ||
| height="100" | ||
| /> | ||
| </code></pre> | ||
| <div line-highlight='3'></div> | ||
| <ol start="2"> | ||
| <li>Generate and implement the <code>imageUrl</code> <strong>pipe</strong>.</li> | ||
| </ol> | ||
|
|
@@ -761,12 +773,16 @@ <h2>Technical Requirements</h2> | |
| <p>Hint: Use String.prototype.replace to create the new path with image name.</p> | ||
| </blockquote> | ||
| <h2>Setup</h2> | ||
| <p>✏️ Run the following to generate the <strong>pipe</strong> and the pipe’s tests:</p> | ||
| <pre><code class="language-bash">ng g pipe imageUrl | ||
| </code></pre> | ||
| <p>✏️ Update <strong>src/app/restaurant/restaurant.component.html</strong> file to use the pipe we will create:</p> | ||
| <pre><code class="language-html"><div class="restaurants"> | ||
| <h2 class="page-header">Restaurants</h2> | ||
| <ng-container *ngIf="restaurants.length"> | ||
| <div class="restaurant" *ngFor="let restaurant of restaurants"> | ||
| <img | ||
| alt="" | ||
| src="{{ restaurant.images.thumbnail | imageUrl }}" | ||
| width="100" | ||
| height="100" | ||
|
|
@@ -793,10 +809,14 @@ <h2>Setup</h2> | |
| </div> | ||
|
|
||
| </code></pre> | ||
| <div line-highlight="5-9,"></div> | ||
| <p>✏️ Run the following to generate the <strong>pipe</strong> and the pipe’s tests:</p> | ||
| <pre><code class="language-bash">ng g pipe imageUrl | ||
| </code></pre> | ||
| <div line-highlight="5-10,only"></div> | ||
| <h3>Having issues with your local setup?</h3> | ||
| <p>You can get through most of this tutorial by using an online code editor. You won’t be able to run our tests to verify your solution, but you will be able to make changes to your app and see them live.</p> | ||
| <p>You can use one of these two online editors:</p> | ||
| <ul> | ||
| <li><p><a href="https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/angular/3a-pipes/problem?file=src/app/image-url.pipe.ts">StackBlitz</a></p></li> | ||
| <li><p><a href="https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/angular/3a-pipes/problem?file=src/app/image-url.pipe.ts">CodeSandbox</a></p></li> | ||
| </ul> | ||
| <h2>How to Verify Your Solution is Correct</h2> | ||
| <p>✏️ Update the restaurant spec file <strong>src/app/restaurant/restaurant.component.spec.ts</strong> to include the new pipe:</p> | ||
| <pre><code class="language-ts">import { | ||
|
|
@@ -859,7 +879,7 @@ <h2>How to Verify Your Solution is Correct</h2> | |
| }); | ||
|
|
||
| </code></pre> | ||
| <div line-highlight='8,17, only'></div> | ||
| <div line-highlight="8,17,only"></div> | ||
| <p>✏️ Update the spec file <strong>src/app/image-url.pipe.spec.ts</strong> to be:</p> | ||
| <pre><code class="language-ts">import { ImageUrlPipe } from './image-url.pipe'; | ||
|
|
||
|
|
@@ -879,26 +899,28 @@ <h2>How to Verify Your Solution is Correct</h2> | |
|
|
||
| </code></pre> | ||
| <div line-highlight='8-14'></div> | ||
| <h2>Solution</h2> | ||
| <blockquote> | ||
| <p>If you’ve implemented the solution correctly, when you run <code>npm run test</code> all tests will pass!</p> | ||
| </blockquote> | ||
| <h2>Solution</h2> | ||
| <p><details> | ||
| <summary>Click to see the solution</summary> | ||
| ✏️ Update <strong>src/app/image-url.pipe.ts</strong> to:</p> | ||
| <pre><code class="language-ts">import { Pipe, PipeTransform } from '@angular/core'; | ||
|
|
||
| @Pipe({ | ||
| name: 'imageUrl', | ||
| name: 'imageUrl' | ||
| }) | ||
| export class ImageUrlPipe implements PipeTransform { | ||
|
|
||
| transform(value: string): string { | ||
| return value.replace('node_modules/place-my-order-assets', './assets'); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| </code></pre> | ||
| <div line-highlight='7-9'></div> | ||
| <div line-highlight="8-9,only"></div> | ||
| <p></details></p> | ||
|
|
||
| </section> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.