Application Toolbar component example

The following is a walkthrough of creating the AppToolbarComponent component

• Example change request

  • Overview

  • Acceptance criteria

  • Technical requirements

• Generate component library

• Update AppToolbarComponent files

  • Update AppToolbarComponent

  • Update AppToolbarComponent template

  • Update AppToolbarComponent styles

• Update main application

  • Update AppModule

  • Update AppComponent template

  • Update AppComponent styles

• 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:

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:

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:

<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:

: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.

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.

<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.

.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