Angular2 SPA (REST API) basic get (CRUD)

Question

Good Morning,

I have my back-end working beautifully but just can’t finish off the front!

I'm confident in my ability to config the back however when I load my desired page I just can’t display my data.

Would someone please advise or direct to a tutorial?

This is what I'm currently using to assist: Angular-2-crud

Thanks GWS

cashmovement-list.component.ts

import { Component, OnInit, ViewChild, Input, Output, trigger, state, style, animate, transition } from '@angular/core';

import { ModalDirective } from 'ng2-bootstrap';

import { DataService } from '../shared/services/data.service';
import { DateFormatPipe } from '../shared/pipes/date-format.pipe';
import { ItemsService } from '../shared/utils/items.service';
import { NotificationService } from '../shared/utils/notification.service';
import { ConfigService } from '../shared/utils/config.service';
import { ICashMovement, Pagination, PaginatedResult } from '../shared/interfaces';

@Component({
moduleId: module.id,
selector: 'cashmovements',
templateUrl: 'cashmovement-list.component.html'
})

export class CashMovementListComponent implements OnInit { 
    public cashmovements: ICashMovement[];

constructor(private dataService: DataService,
    private itemsService: ItemsService,
    private notificationService: NotificationService) { }


ngOnInit() {
    this.dataService.getCashMovements()
        .subscribe((cashmovements: ICashMovement[]) => {
            this.cashmovements = cashmovements;
        },
        error => {
            this.notificationService.printErrorMessage('Failed to load users. ' + error);
        });
} 

}

cashmovement-list.component.html

<button class="btn btn-primary" type="button" *ngIf="cashmovements">
   <i class="fa fa-calendar" aria-hidden="true"></i> CashMovements  
   <span class="badge">{{totalItems}}</span>
</button>
 
<hr/>
 
<div [@flyInOut]="'in'">
    <table class="table table-hover">
        <thead>
            <tr>
                <th><i class="fa fa-text-width fa-2x" aria-hidden="true"></i>Cash Movement ID</th>
                <th><i class="fa fa-user fa-2x" aria-hidden="true"></i>PortfolioCode</th>
                <th><i class="fa fa-paragraph fa-2x" aria-hidden="true"></i>CCY Out</th>
                <th><i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>Account Out</th>
                <th><i class="fa fa-calendar-o fa-2x" aria-hidden="true"></i>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let cashmovement of cashmovements">
                <td> {{cashmovement.CashMovementId}}</td>
                <td>{{cashmovement.PortfolioCode}}</td>
                <td>{{cashmovement.Ccyo}}</td>
                <td>{{cashmovement.AccountO}}</td>
                <td>{{cashmovement.Date | dateFormat | date:'medium'}}</td>
            </tr>
        </tbody>
    </table> 
</div>

interfaces.ts

export interface ICashMovement {
 CashMovementId: number;
 PortfolioCode: string;
 Date: Date;
 Ccyo: string;     
 AccountO: string;
 ValueO: number;
 Ccyi: string;     
 AccountI: string;
 ValueI: number;
 status: string;
 comment: string;
 LastUpdate: number;
}

app.module.ts

import './rxjs-operators';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { PaginationModule } from 'ng2-bootstrap/ng2-bootstrap';
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ProgressbarModule } from 'ng2-bootstrap/ng2-bootstrap';
import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-    loading-bar';
import { TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent }   from './app.component';
import { DateFormatPipe } from './shared/pipes/date-format.pipe';
import { HighlightDirective } from   './shared/directives/highlight.directive';
import { HomeComponent } from './home/home.component';
import { MobileHideDirective } from './shared/directives/mobile-hide.directive';

import { CashMovementListComponent } from './cashmovements/cashmovement-list.component';

import { routing } from './app.routes';


import { DataService } from './shared/services/data.service';
import { ConfigService } from './shared/utils/config.service';
import { ItemsService } from './shared/utils/items.service';
import { MappingService } from './shared/utils/mapping.service';
import { NotificationService } from './shared/utils/notification.service';

@NgModule({
imports: [
    BrowserModule,
    DatepickerModule,
    FormsModule,
    HttpModule,
    Ng2BootstrapModule,
    ModalModule,
    ProgressbarModule,
    PaginationModule,
    routing,
    TimepickerModule
],
declarations: [
    AppComponent,
    DateFormatPipe,
    HighlightDirective,
    HomeComponent,
    MobileHideDirective,
    SlimLoadingBarComponent,
    CashMovementListComponent        
],
providers: [
    ConfigService,
    DataService,
    ItemsService,
    MappingService,
    NotificationService,
    SlimLoadingBarService
],
bootstrap: [AppComponent]
})
export class AppModule { }

data.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { ICashMovement, Pagination, PaginatedResult } from '../interfaces';
import { ItemsService } from '../utils/items.service';
import { ConfigService } from '../utils/config.service';

@Injectable()
export class DataService {

    _baseUrl: string = '';

    constructor(private http: Http,
        private itemsService: ItemsService,
        private configService: ConfigService) {
        this._baseUrl = configService.getApiURI();
    }


    getCashMovements(): Observable<ICashMovement[]> {
        return this.http.get(this._baseUrl + 'cashmovements')
            .map((res: Response) => { return res.json();     })
            .catch(this.handleError);
    }

    private handleError(error: any) {
        var applicationError = error.headers.get('Application-Error');
        var serverError = error.json();
        var modelStateErrors: string = '';

        if (!serverError.type) {
            console.log(serverError);
            for (var key in serverError) {
                if (serverError[key])
                    modelStateErrors += serverError[key] + '\n';
            }
        }

        modelStateErrors = modelStateErrors = '' ? null : modelStateErrors;

        return Observable.throw(applicationError || modelStateErrors || 'Server error');
    }


}

Answer 1

I think the problem might be in your templateUrl. You need to prefix the partial view with ./ regardless of whether you use moduleId. You need to specify templateUrl: "./cashmovement-list.component.html"

However, if you are getting any error in the dve console of your browser you should post it as an uplate to your question.