> For the complete documentation index, see [llms.txt](https://flignats.gitbook.io/full-stack-typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flignats.gitbook.io/full-stack-typescript/workflows/development-workflow/component-workflow/application-toolbar-component-example.md).

# Application Toolbar component example

* [Example change request](#example-change-request)
  * [Overview](#overview)
  * [Acceptance criteria](#acceptance-criteria)
  * [Technical requirements](#technical-requirements)
* [Generate component library](#generate-component-library)
* [Update AppToolbarComponent files](#update-apptoolbarcomponent-files)
  * [Update AppToolbarComponent](#update-apptoolbarcomponent)
  * [Update AppToolbarComponent template](#update-apptoolbarcomponent-template)
  * [Update AppToolbarComponent styles](#update-apptoolbarcomponent-styles)
* [Update main application](#update-main-application)
  * [Update AppModule](#update-appmodule)
  * [Update AppComponent template](#update-appcomponent-template)
  * [Update AppComponent styles](#update-appcomponent-styles)
* [Conclusion](#conclusion)

## Example change request

#### Overview

The application toolbar will provide users with the ability to navigate the application.

#### Acceptance criteria

* `Observe` toolbar is displayed at the top of the application
* `Observe` toolbar includes the following links
  * `Full Stack Typescript`
    * Navigates to the `/about` view
  * `Authentication`
    * Opens a menu of links
    * `Login`
      * Navigates to the `/login` view
    * `Sign Up`
      * Navigates to the `/sign-up` view
    * `Forgot Password`
      * Navigates to the `/forgot-password` view
    * `Verify Email`
      * Navigates to the `/verify-email` view
    * `Account`
      * Navigates to the `/account` view
  * `Github`
    * Opens a new window to the Github repository

#### Technical requirements

* `app-toolbar` standalone component

## Generate component library

Run the below command to generate the `app-toolbar` component library.

```
nx g lib --name=app-toolbar --directory=libs/components --changeDetection=OnPush --flat --standalone --style=scss
```

The following project files should be created:

```
libs
 ...
 - components
   - app-toolbar
      - src
        - lib
          - components-app-toolbar.component.ts|html|scss
        - index.ts
        - test-setup.ts
      - .eslintrc.json
      - jest.config.ts
      - project.json
      - README.md
      - tsconfig.json|lib|spec
```

`Rename` the component files to be `app-toolbar.component.ts|html|scss`

`Update` `app-toolbar.component.ts` to be:

```typescript
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'full-stack-typescript-app-toolbar',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app-toolbar.component.html',
  styleUrls: ['./app-toolbar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppToolbarComponent {}
```

`Update` `libs\components\app-toolbar\src\index.ts` to export the `app-toolbar` component.

We are now ready to begin development on the `app-toolbar` in effort to satisfy the change request acceptance criteria.

## Update AppToolbarComponent files

### Update AppToolbarComponent

The `AppToolbarComponent` will need its imports update to satisfy the change request requirements.

`Update` `libs\components\app-toolbar\src\lib\app-toolbar.component.ts` to be:

```typescript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'full-stack-typescript-app-toolbar',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatDividerModule,
    MatMenuModule,
    MatToolbarModule,
  ],
  templateUrl: './app-toolbar.component.html',
  styleUrls: ['./app-toolbar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppToolbarComponent {}

```

### Update AppToolbarComponent template

`Update` `libs\components\app-toolbar\src\lib\app-toolbar.component.html` to be:

```html
<mat-toolbar color="primary">
    <span routerLink="about">Full Stack Typescript</span>
    <span class="toolbar-spacer"></span>
    <span class="toolbar-link" [matMenuTriggerFor]="authMenu">Authentication</span>
    <mat-menu #authMenu="matMenu">
        <button mat-menu-item routerLink="login">Login</button>
        <button mat-menu-item routerLink="sign-up">Sign Up</button>
        <mat-divider></mat-divider>
        <mat-divider></mat-divider>
        <button mat-menu-item routerLink="forgot-password">Forgot Password</button>
        <button mat-menu-item routerLink="verify-email">Verify Email</button>
        <mat-divider></mat-divider>
        <mat-divider></mat-divider>
        <button mat-menu-item routerLink="account">Account</button>
    </mat-menu>
    <span class="toolbar-link">Github</span>
</mat-toolbar>

```

### Update AppToolbarComponent styles

Often, a design is a provided to guide the development of the component styles. However, for this example we will add some simple styles for our toolbar.

`Update` `libs\components\app-toolbar\src\lib\app-toolbar.component.scss` to be:

```scss
:host {
    width: 100%;
}

.toolbar-spacer {
    flex: 1 1 auto;
}

.toolbar-link {
    margin: 0 1em;
}
```

## Update main application

Now that our `AppToolbarComponent` is ready for use, we can import it in the main application.

### Update AppModule

`Update` `apps\full-stack-typescript\src\app\app.module.ts` to include the new component.

```typescript
import { AppComponent } from './app.component';

@NgModule({
  ...
  imports: [
    ...
    AppToolbarComponent
  ],
  ...
})
export class AppModule {}

```

### Update AppComponent template

`Update` `apps\full-stack-typescript\src\app\app.component.html` to include the new toolbar component.

```html
<div class="theme-wrapper">
    <div class="wrapper">
        <div class="toolbar">
            <full-stack-typescript-app-toolbar></full-stack-typescript-app-toolbar>
        </div>
        <div class="content">
            <router-outlet #o="outlet"></router-outlet>
        </div>
    </div>
</div>

```

### Update AppComponent styles

`Update` `apps\full-stack-typescript\src\app\app.component.scss` to include some simple toolbar styles.

```scss
.toolbar {
    position: fixed;
    width: 100%;
    display: flex;
    z-index: 10;
}
```

## Conclusion

Our new component should now be available for use. Serve the application and verify everything is working properly.

`nx serve full-stack-typescript`