# 10.5: Building the Message Component in Angular

Now that we have the backend set up how we want it for the most part - let's start working on the interface in Angular.

## Add a Message Interface

We'll start by adding a new interface to the `SPA/src/app/models` folder called `Message.ts`. This will be similar to our `MessageToReturn` DTO on the backend.

```csharp
export interface Message {
    id: number;
    senderId: number;
    senderKnownAs: string;
    senderPhotoUrl: string;
    recipientId: number;
    recipientKnownAs: string;
    recipientPhotoUrl: string;
    content: string;
    isRead: boolean;
    dateRead: Date;
    dateSent: Date;
}
```

## Add a Service Method

In `user.service.ts` - we'll add a new method called `getMessages()`. This will be similar to our `getUsers()` method.

```typescript
getMessages(id: number, page?, itemsPerPage?, messageContainer?) {
    const paginatedResult: PaginatedResult<Message[]> = new PaginatedResult<Message[]>();
    let params = new HttpParams();

    params = params.append('MessageContainer', messageContainer);

    if (page != null && itemsPerPage != null) {
        params = params.append('pageNumber', page);
        params = params.append('pageSize', itemsPerPage);
    }

    return this._http.get<Message[]>(this.baseUrl + 'users/' + id + '/messages', { observe: 'response', params})
        .map(response => {
            paginatedResult.result = response.body;

            if (response.headers.get('Pagination') != null) {
                paginatedResult.pagination = JSON.parse(response.headers.get('Pagination'));
            }

            return paginatedResult;
        });
}
```

## Add Message Resolver

In the `resolvers` folder, add a new class called `message.resolver.ts`. Again, this will be very similar to other resolvers we've written:

```typescript
export class MessagesResolver implements Resolve<Message[]> {

    pageSize = 5;
    pageNumber = 1;
    messageContainer = 'Unread';

    constructor(
        private _userService: UserService,
        private _authService: AuthService,
        private _router: Router,
        private _alertify: AlertifyService) {}

    resolve(route: ActivatedRouteSnapshot): Observable<Message[]> {
        return this._userService.getMessages(this._authService.decodedToken.nameid,
            this.pageNumber, this.pageSize, this.messageContainer)
            .catch(error => {
            this._alertify.error('Problem retrieving data');
            this._router.navigate(['/home']);
            return Observable.of(null);
        });
    }
}
```

We, of course, need to add it to `app.module.ts`:

```typescript
import { MessagesResolver } from './resolvers/message.resolver';

//  ...

providers: [
    //  ...
    MessagesResolver
```

Finally, we need to add the resolver to our `routes.ts` file:

```typescript
{ path: 'messages', component: MessagesComponent, resolve: { messages: MessagesResolver} },
```

## Update MessagesComponent

In our `messages.component.ts` file, we'll write it out very similarly to what we've done in other components.

```typescript
export class MessagesComponent implements OnInit {
  messages: Message[];
  pagination: Pagination;
  messageContainer = 'Unread';

  constructor(
    private _userService: UserService,
    private _alertify: AlertifyService,
    private _route: ActivatedRoute,
    private _authService: AuthService
  ) { }

  ngOnInit() {
    this._route.data.subscribe(data => {
      this.messages = data['messages'].result;
      this.pagination = data['messages'].pagination;
    });
  }

  loadMessages() {
    this._userService
      .getMessages(this._authService.decodedToken.nameid, this.pagination.currentPage,
        this.pagination.itemsPerPage, this.messageContainer)
        .subscribe((res: PaginatedResult<Message[]>) => {
          this.messages = res.result;
          this.pagination = res.pagination;
        }, error => {
          this._alertify.error(error);
        });
  }

  pageChanged(event: any): void {
    this.pagination.currentPage = event.page;
    this.loadMessages();
  }

}
```

## Verify Data is Loading

Even though our template is just the default `messages works!` - because of the resolver, we can still verify that the data is being loaded correctly.

Open up the app, login to one of the accounts with messages, and navigate to the `Messages` tab.

Open up your developer tools and the network tab. If you click on the `200 OK` response from the `messages` endpoint and then click `Preview` - you should be able to see the correct data:

![MessagesLoaded](https://122480229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfVcpLNVPaSQtyc%2F-LEoXBIjxiJ9_48lrXMp%2F-LEoXDZrI9MLkFOAKRNB%2Fmessagesloaded.png?generation=1528816005790782\&alt=media)

Setting up this component was very repetitive. But, if it's repetitive - it means you're getting the hang of it and would be able to implement similar functionality in your apps or extend this one without a problem!