💻 Lab 4 - Generate a component lib

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

App Screenshot

File structure

Stop the nx serve
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
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

Import MatToolbarModule in the new shared module you just created

🐳 Hint

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
   imports: [CommonModule, MatToolbarModule],
   //...

Replace the header component's template / class
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)

Let's use the new shared header component we created

🐳 Hint

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

Serve the project and test the changes
Run the command to inspect the dependency graph - What do you see? (Remember to "Select all" in the top left corner)
🐳 Hint
```
nx dep-graph
```
Inspect what changed from the last time you committed, then commit your changes

🎓If you get stuck, check out the solution