To compose our applications, we need three more components.
One is a grid of rooms.
Each room is presented using 

.
This component will contain both read-only and edit-enabled modes.

.
As we planned, our applications will contain a predefined list of backgrounds to choose from.
We need a component to handle that.

I forgot about the last component we need, so we don't have a library generated in previous lessons.
Fortunately, it's a great chance to show you how it works when you're in coding flow.
We'll need a list of timeline items for each room.

To make our background component, first of all, we need a few nice photos.
I will use royalty-free images from 

, but feel free to use your favorite images.
Here you have links to the photos I used:

The plan for that component is to create a service 


that will provide an ordered list of available images.
The component on input will receive an index of the image to display,
and it will use 

Before we jump straight to the code, we need to speak about contracts.
Method 

Of course, it's not our DTO that we extracted after the backend application migration.
DTO should be used only in communication between applications and should never be passed to the UI layer.
The reason is to create a protective layer for most parts of the application.
I mean, for example, if DTO was changed because it was necessary for the backend application,
you don't want to be forced to change every possible usage of this DTO in the frontend application.
It's hard to do and painful when you try to merge it.

Instead of that, it's better to map the DTO into another object,
so when it comes to DTO changes, all you need to do is fix your mapping method.
It's just less work to do.

BTW.
You should probably consider mapping this object more than once.
It really depends on your needs.
If you keep and process data not only on the backend,
but on frontend as well, I would recommend keeping at least three types on the frontend side:

To make it easier to understand,
if you use any state management libraries, you can simplify the idea of having a separate type to update,
keep and select the state.

 method.
Our application is split into reusable libraries.
If you import an object from one library to another, you create a dependency.
It's very easy to create circular dependencies. We'll discuss this later in the course. For now, you need to know that we want to avoid necessary dependencies.
I don't think that a good idea is to create a new library and 

 class inside it.
It's an unnecessary dependency, in my opinion.
What I like to do is to assume that every library is independent,
so if you want to use it, you must fulfill a communication contract exposed by the library.

 means for it, and if you want to use it,
you need to transform your data to make it compile.
We're back to the mapping method I have described above.

Using this method will prevent unwanted refactors on the shared code
because even when room definition completely changes over time, you don't need to change shared code.
It will still display a room background.
From the point of library view, you don't care what kind of room the app needs to display,
as long as they provide the data in the correct format.

---
title: Adding a domain library for RoomList, RoomBackground and RoomTimelineList that I missed in previous lessons
description: Add a domain library for the components
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.09-domain-libs?ref_type=heads
privateVideoUrl: https://stream.mux.com/uEr02zzIuTQXa00H2zqVOuvHBHp3ydhAQGp5tkcap6yck.m3u8
---

To compose our applications, we need three more components.
One is a grid of rooms.
Each room is presented using `CardComponent`.
This component will contain both read-only and edit-enabled modes.

The next one is `RoomBackgroundComponent`.
As we planned, our applications will contain a predefined list of backgrounds to choose from.
We need a component to handle that.

I forgot about the last component we need, so we don't have a library generated in previous lessons.
Fortunately, it's a great chance to show you how it works when you're in coding flow.
We'll need a list of timeline items for each room.

## `RoomBackgroundComponent`

To make our background component, first of all, we need a few nice photos.
I will use royalty-free images from [unsplash](https://unsplash.com/), but feel free to use your favorite images.
Here you have links to the photos I used:

[photo 1](https://images.unsplash.com/photo-1685789002226-66b99007e48d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80),
[photo 2](https://images.unsplash.com/photo-1686323604920-57c989b7ad87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80),
[photo 3](https://images.unsplash.com/photo-1686080187868-adcba0d63014?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80),
[photo 4](https://images.unsplash.com/photo-1686246162793-3d35e3eacb47?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=80),
[photo 5](https://images.unsplash.com/photo-1686062095898-de61c74f2a2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=80),
[photo 6](https://images.unsplash.com/photo-1686079746732-ab2a86a36b82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2429&q=80),
[photo 7](https://images.unsplash.com/photo-1685543905636-cdc396ded922?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80),
[photo 8](https://images.unsplash.com/photo-1685648042049-6138b9d12905?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2057&q=80),
[photo 9](https://images.unsplash.com/photo-1685452329316-d505335ca3d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80),
[photo 10](https://images.unsplash.com/photo-1685846381529-bb40809f8c80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80)

The plan for that component is to create a service `RoomBackgroundImageService`
that will provide an ordered list of available images.
The component on input will receive an index of the image to display,
and it will use `RoomBackgroundImageService` to get the URL for the selected image.

`RoomBackgroundImageService` is exposing three methods:

-   `getAll()`, which returns an array with all available indexes
-   `getUrlByIndex(index: number)`, which returns the URL to an image by the given index
-   `getUrlByRoom(room: Room)`, which returns the URL by the given room object

Before we jump straight to the code, we need to speak about contracts.
Method `getUrlByRoom(room: Room)` as an argument gets `Room` object.
What is it?

Of course, it's not our DTO that we extracted after the backend application migration.
DTO should be used only in communication between applications and should never be passed to the UI layer.
The reason is to create a protective layer for most parts of the application.
I mean, for example, if DTO was changed because it was necessary for the backend application,
you don't want to be forced to change every possible usage of this DTO in the frontend application.
It's hard to do and painful when you try to merge it.

Instead of that, it's better to map the DTO into another object,
so when it comes to DTO changes, all you need to do is fix your mapping method.
It's just less work to do.

BTW.
You should probably consider mapping this object more than once.
It really depends on your needs.
If you keep and process data not only on the backend,
but on frontend as well, I would recommend keeping at least three types on the frontend side:

-   DTO used in communication between external resources like backend
-   UI read-only objects used by components to display the data
-   Objects used for processing are preferably immutable, but it all depends on the case.

To make it easier to understand,
if you use any state management libraries, you can simplify the idea of having a separate type to update,
keep and select the state.

Return to our `getUrlByRoom(room: Room)` method.
Our application is split into reusable libraries.
If you import an object from one library to another, you create a dependency.
It's very easy to create circular dependencies. We'll discuss this later in the course. For now, you need to know that we want to avoid necessary dependencies.
I don't think that a good idea is to create a new library and `Room` class inside it.
It's an unnecessary dependency, in my opinion.
What I like to do is to assume that every library is independent,
so if you want to use it, you must fulfill a communication contract exposed by the library.

It means that our `room-background` library will define what `Room` means for it, and if you want to use it,
you need to transform your data to make it compile.
We're back to the mapping method I have described above.

Using this method will prevent unwanted refactors on the shared code
because even when room definition completely changes over time, you don't need to change shared code.
It will still display a room background.
From the point of library view, you don't care what kind of room the app needs to display,
as long as they provide the data in the correct format.

I'm sorry for a long theoretical and architecture lecture,
but it's important to understand why, even when we heavily share code between applications,
we still want to keep it independent.

Let's check how `RoomBackgroundImageService` is implemented.

```typescript { actualFilename=../../../manuscript/code/04.09-domain-libs/libs/components/room-background/src/lib/room-background-image.service.ts endChar=2332 endLine=41 startChar=0 startLine=1 statedFilename=libs/components/room-background/src/lib/room-background-image.service.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.09/.../../manuscript/code/04.09-domain-libs/libs/components/room-background/src/lib/room-background-image.service.ts }
import {Injectable} from "@angular/core";

export interface Room {
  getImg(): string;
}


@Injectable({providedIn: "root"})
export class RoomBackgroundImageService {

  private readonly images = [
    'https://images.unsplash.com/photo-1685789002226-66b99007e48d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    'https://images.unsplash.com/photo-1686323604920-57c989b7ad87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    'https://images.unsplash.com/photo-1686080187868-adcba0d63014?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    'https://images.unsplash.com/photo-1686246162793-3d35e3eacb47?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=80',
    'https://images.unsplash.com/photo-1686062095898-de61c74f2a2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=80',
    'https://images.unsplash.com/photo-1686079746732-ab2a86a36b82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2429&q=80',
    'https://images.unsplash.com/photo-1685543905636-cdc396ded922?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    'https://images.unsplash.com/photo-1685648042049-6138b9d12905?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2057&q=80',
    'https://images.unsplash.com/photo-1685452329316-d505335ca3d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    'https://images.unsplash.com/photo-1685846381529-bb40809f8c80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=8'
  ];

galczo5

Adding a domain library for RoomList, RoomBackground and RoomTimelineList that I missed in previous lessons

To compose our applications, we need three more components.

First one is grid of rooms and each room is presented using card component.

This component will be used in both fronted applications.

The next one is room background component.

At Repound, our application will contain a predefined list of backgrounds to

And the last component is room timeline list component,

which will present all meetings for selected room.

So let's start with room background component.

I'm using r/images, but if you have your own favorite pictures, just use it.

The plan for this component is to separate logic from the visual part of

so we will create room background image series that will provide an order list

The component input will receive an index of the image to display,

and then it will use room background image service to get the URL for selected

We're using indexes instead of URLs or names, because it will allow us to

So room background image service is exposing three methods.

Get all, get URL by index that gets index as argument,

and of course get URL by room, which returns URL for given room.

Before we jump straight to the code, we need to speak about contracts.

So method get URL by room is using room as parameter.

And of course, it's not the DTO that we extracted in previous lessons.

You want to avoid using the same objects that you get from HTTP later in the

Because if you do this, it means that if the DTO will change,

for example, someone will remove a field or add a field,

you need to go through the whole application and fix all the usages in that

The idea here is to map DTO to some other object that will not change.

So even if the HTTP is changing and you have to fix your code,

you will need to fix it only in one place.

And by the way, you probably should consider mapping this object more than once

Basically, every time when you need to use something,

you should create a separate object that sets the contract for the whole

And I would recommend keeping at least three types of objects on the front-end

DTOs as a contract between front-end and back-end.

So you use these objects only to display and immutable objects that you use for

So for example, you receive DTOs from HTTP, then you map it to domain objects,

and you can perform a lot of operations on that, then you map it to UI read-

I have put in the description to this video all necessary details that describe

of objects. So now we are ready to create room background image service.

Give me a second and I will show you the code.

On the top of the file, I have an interface called room.

It's my contract, so if you are going to use this service, you need to fill

You need to provide me a room object that expose getEMG method that is

Next, I have an array of images that I'm going to use and three methods.

So I have get all, which basically goes through images and returns an index of

Then I have getURL by index, so you're providing me an index.

I'm checking if I have an image for that index, and I'm returning the URL.

If not, I'm throwing an error, and the last one, getURL by room.

So I'm using that room interface to get image index a string.

I'm converting it to the number, and then I'm returning the URL.

So nothing really complicated, very simple service.

And with that construction, I'm able to change these URLs later.

If necessary, for example, we have new images that we are going to use,

or something, I'm storing only indexes of these images.

So the only constraint for me is to provide 10 images.

And of course, I need to expose room service from index.ts, so let's do this.

And we are ready to create a storybook story.

My storybook component is quite simple, so I'm injecting that room background

and I'm using getURL here to get list of all available images.

And then I'm iterating through it to display all of them, using shared room

And let's switch to the browser and check how it looks like.

So as you can see, nothing really impressive at the moment,

because we have only room background works, tags here, multiple times.

So let's implement the component and check again.

Okay, so shared room background component is quite simple.

We have a div that is using style with background image to show the image.

And then we have a required input called index.

So we have to provide that index to display.

I'm injecting room background service, and then I'm using it in getURL method

to construct the URL string for that background image here.

So let's switch back to the storybook and check how it looks like at the moment

And as you can see, we have a very nice overview of all images that we can use

And this component is a bit more complicated.

It's still simple, but the main idea here, why I'm not calling it as a basic

is that this component keeps an information, the main knowledge about available

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