Please remember to paste styles for the admin application.
You may create a new library that you can import, and it will add the styles for you.
Treat this as homework.
You may find it inspiring to check how the class 

 was implemented inside the Angular framework. 

As we have everything prepared, building an app is relatively simple.
Our admin application will have two routes:

Our routing configuration should look like in the code below.

import {Route} from '@angular/router';

export const appRoutes: Route[] = [
  {
    path: 'room',
    loadComponent: () => import('./rooms/admin-room-list.component')
      .then(t => t.AdminRoomListComponent)
  },
  {
    path: 'room/:id/edit',
    loadComponent: () => import('./rooms/admin-room-edit.component')
      .then(t => t.AdminRoomEditComponent)
  },
  {
    path: '',
    redirectTo: '/room',
    pathMatch: "full"
  }
];

I'm going to use standalone components because I like it,
but there is no technical reason, so if you feel more comfortable with modules, feel free to use them.

Each route has its own component. We'll start with 

 component to display the grid of rooms.
I'm using the 

 pipe in the template to pass the rooms to the 

.
As part of the configuration, I'm enabling.

---
title: Constructing the Admin application
description: Constructing the Admin application
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.11-admin-app?ref_type=heads
privateVideoUrl: https://stream.mux.com/Fsz5bNn6etYSlP8Ew3kR8i01zgonM7wO8qF6oYsiM021I.m3u8
---

:::note

Please remember to paste styles for the admin application.
You may create a new library that you can import, and it will add the styles for you.
Treat this as homework.
You may find it inspiring to check how the class `DomSharedStylesHost` was implemented inside the Angular framework. 

:::

As we have everything prepared, building an app is relatively simple.
Our admin application will have two routes:

-   `/room` - list of available rooms
-   `room/:id/edit` - edit page for new and existing rooms

Our routing configuration should look like in the code below.

```typescript { actualFilename=../../../manuscript/code/04.11-admin-app/apps/admin-frontend/src/app/app.routes.ts endChar=435 endLine=20 startChar=0 startLine=1 statedFilename=apps/admin-frontend/src/app/app.routes.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.11/.../../manuscript/code/04.11-admin-app/apps/admin-frontend/src/app/app.routes.ts }
import {Route} from '@angular/router';

export const appRoutes: Route[] = [
  {
    path: 'room',
    loadComponent: () => import('./rooms/admin-room-list.component')
      .then(t => t.AdminRoomListComponent)
  },
  {
    path: 'room/:id/edit',
    loadComponent: () => import('./rooms/admin-room-edit.component')
      .then(t => t.AdminRoomEditComponent)
  },
  {
    path: '',
    redirectTo: '/room',
    pathMatch: "full"
  }
];
```

I'm going to use standalone components because I like it,
but there is no technical reason, so if you feel more comfortable with modules, feel free to use them.

Each route has its own component. We'll start with `AdminRoomListComponent`.

## `AdminRoomListComponent`

My implementation is using the `shared-room-list` component to display the grid of rooms.
I'm using the `OnInit` hook to fetch rooms and the `async` pipe in the template to pass the rooms to the `shared-room-list`.
As part of the configuration, I'm enabling.

```typescript { actualFilename=../../../manuscript/code/04.11-admin-app/apps/admin-frontend/src/app/rooms/admin-room-list.component.ts endChar=1027 endLine=39 startChar=0 startLine=1 statedFilename=apps/admin-frontend/src/app/rooms/admin-room-list.component.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.11/.../../manuscript/code/04.11-admin-app/apps/admin-frontend/src/app/rooms/admin-room-list.component.ts }
import {Component, inject, OnInit} from "@angular/core";
import {RoomListComponent} from "shared/components/room-list";
import {Room, RoomsStateService} from "state/rooms";
import {AsyncPipe, CommonModule} from "@angular/common";
import {Router} from "@angular/router";

@Component({
  selector: 'admin-room-list',
  template: `
    <shared-room-list [rooms]="(roomsState.get() | async) || []"
                      [newRoomButton]="true"
                      (newRoomClicked)="createNewRoom()"
                      (roomSelected)="editRoom($event)"/>
  `,
  imports: [
    CommonModule,
    RoomListComponent,
    AsyncPipe
  ],
  standalone: true
})
export class AdminRoomListComponent implements OnInit {

  roomsState = inject(RoomsStateService);
  private readonly router = inject(Router);

  ngOnInit(): void {
    this.roomsState.fetch();
  }

  createNewRoom(): void {
    this.router.navigateByUrl(`room/0/edit`);
  }

  editRoom(room: Room): void {
    this.router.navigateByUrl(`room/${room.getId()}/edit`);
  }
}
```

The last part of the class is to implement what should happen when you click on the room or add the card.
I'm implementing two methods, `createNewRoom()` and `editRoom()`.

![Rooms list](https://d2uusema5elisf.cloudfront.net/courses/building-angular-applications-with-nx/module_05/lesson_05.11/public/images/04-11-01.png)

## `AdminRoomEditComponent`

The second component is more complex.
If you remember the design, this component has two parts.
In the top part, you can edit the room name and choose room image.
On the bottom, there's a form where you can add a meeting to the list.

galczo5

Constructing the Admin application

Okay, it's time to finalize our first application.

So our application will contain two screens.

The first screen contains list of all available rooms

Every room will have background assigned and name.

The second screen will be used to edit room details.

you can select room background and add meetings to the room.

From the technical point of view, we will have two routes.

We will create two components for these routes.

The second routing component, admin room edit component,

we'll use multiple components that we created in previous lessons,

for example, shared button and shared room background.

So let me add empty components and configure routing,

Please remember to add styles in file styles.css

so I have import and path to my components.

At the moment, both components are empty.

I'm going to add necessary code in components

from the root component, so app component.

I have a template, which is only router outlet.

you can see that I have backend running using command

I'm providing backend URL with this method.

That's why we wanted that static method for backend URL,

in case if you're going to this other backend,

you're going to house it in different place,

you can just replace that string and as all.

I have rooms state module and meeting state module.

And as you probably remember, we have to provide

something that implements room interface.

So in my code, I'm using ng-on-init-hook to fetch the data.

that navigates us to edit screen of the selected room.

Everything, as you can see, is binded to the template.

And to outputs, new room clicked and room selected

are binded to create new room method and edit room method.

So let's check what is inside admin room edit component.

It's basically a huge form, which means that we will have

So let's start by analyzing the template.

So on the top, we have a div with button with back arrow.

And we have an input where you can place your room name.

Next, we have a small header that says that you can click

And then we have another block with shared room background

that is rendered in loop for all available backgrounds.

So we are displaying a grid of backgrounds

Then we have another block with shared button with label safe.

The last part of that screen is the last ng-container block.

Second one is for meeting host date from and date to.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript