import { Component , OnInit } from '@angular/core' ; import { DemoService } from '../../../demo/services/demo.service' ; @ Component ( { selector : 'app-messages-list' , template : `
    <div class="mb-5">
      <ui-page-title title="Inbox" [header]="false"></ui-page-title>
    </div>

    <div class="card">
      <div class="table-responsive">
        <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
          <thead>
          <tr>
            <th class="text-center w-1"><i class="icon-people"></i></th>
            <th>From</th>
            <th>Subject</th>
            <th class="text-right">Date</th>
          </tr>
          </thead>
          <tbody>

          <tr *ngFor="let message of getMessages()">
            <td class="text-center">
              <ui-avatar [image]="message.from.photo" status="green"></ui-avatar>
            </td>
            <td>
              <a class="text-default" href="" [routerLink]="[ message.id ]">
                <div>{{ message.from.name }} {{ message.from.surname }}</div>
              </a>
            </td>
            <td>
              <a class="text-default" href="" [routerLink]="[ message.id ]">
                {{message.subject}}  
              </a>
            </td>
            <td class="text-right text-muted">
              {{message.datetime | date: 'medium'}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>

  ` , styles : [ ] , } ) export class MessagesListComponent implements OnInit { public messages = [ ] ; constructor ( public demoService ) { this . messages = this . demoService . messages ; console . log ( this . messages ) ; } ngOnInit ( ) { } public getMessages ( ) { return this . messages ; } }