💻 Lab 4 - Generate a component lib

⏰ Estimated time: 10 minutes

Let's add a header to our app! Because headers can be shared with other components, we will create a common lib that others can import as well.

📚 Learning outcomes:

• Get familiar with generating project specific component libraries inside a folder
  
  
  

📲 After this workshop, you should have:

App Screenshot

File structure

🏋️‍♀️ Steps:

1. Stop the nx serve
   
   

2. Generate a new Angular library called ui-shared in the libs/store folder

   🐳 Hint

   • it's a generator! you've used it before in the second lab, but instead of an app, we now want to generate a lib
   • use the --help command to figure out how to generate it in a directory
   
   

3. Generate a new Angular component, called header, inside the lib you just created

   ⚠️ Play around with the generator options so that the generated component is automatically exported from the lib's module

   🐳 Hint

   use --help to figure out how to specify under which project you want to generate the new component and how to automatically have it exported

   
   

4. Import MatToolbarModule in the new shared module you just created

   🐳 Hint

   import { MatToolbarModule } from '@angular/material/toolbar';
   
   @NgModule({
      imports: [CommonModule, MatToolbarModule],
      //...
   

   
   

5. Replace the header component's template / class
   
   

6. Import the StoreUiSharedModule you just created in the apps/store/src/app/app.module.ts

   🐳 Hint

   import { StoreUiSharedModule } from '@bg-hoard/store/ui-shared';
   

   ⚠️ You might need to restart the TS compiler in your editor (CTRL+SHIFT+P in VSCode and search for Restart Typescript)
   
   

7. Let's use the new shared header component we created

   • Add your new component to apps/store/src/app/app.component.html
   🐳 Hint

   <bg-hoard-header title="Board Game Hoard"></bg-hoard-header>
   <!-- right at the top - above our container -->
   <div class="container"></div>
   

   
   

8. Serve the project and test the changes
   
   

9. Run the command to inspect the project graph - What do you see? (Remember to "Select all" in the top left corner)

   🐳 Hint

   nx graph
   

   
   

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

---

🎓If you get stuck, check out the solution

---

➡️ Next lab ➡️