💻 Lab 5 - Generate a utility lib

⏰ Estimated time: 5-10 minutes

Let's fix the ratings! They don't look that good and they could benefit from some formatting.

We will create a shared utility lib where we'll add our formatters and see how to import them in our components afterwards.

📚 Learning outcomes:

• Get familiar with generating project specific, framework agnostic utility libs

📲 After this workshop, you should have:

App Screenshot

File structure

🏋️‍♀️ Steps:

1. Stop the nx serve
   
   

2. Use the @nx/js package to generate another lib in the libs/store folder - let's call it util-formatters.
   
   

3. Add the code for the utility function to the new library you just created libs/store/util-formatters/src/lib/store-util-formatters.ts
   
   

4. Use it in your frontend project to format the rating for each game

   🐳 Hint

   app.component.ts:

   import { formatRating } from '@bg-hoard/store/util-formatters';
   
   export class AppComponent {
     //...
     formatRating = formatRating;
   }
   

   app.component.html:

   {{ formatRating(game.rating) }}
   

   
   

5. Serve the store app - notice how the ratings are formatted.
   
   

6. Launch the project graph - notice how the app depends on two libs now.
   
   

7. Inspect what changed from the last time you committed, then commit your changes
   
   

---

🎓If you get stuck, check out the solution

---

➡️ Next lab ➡️