# 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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flignats.gitbook.io/full-stack-typescript/workflows/development-workflow/component-workflow/application-toolbar-component-example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.