TCM FundLibrary

Installation

To install this library, run:

$ npm install tcm-fund-module --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install tcm-fund-module --save

and then from your Angular AppModule module :

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, APP_INITIALIZER, LOCALE_ID } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { MAIN_ROUTES } from './app.route.config';
import { TCMMaterialModule, TCMCoreModule, IAppBootstrap } from "tcm-base-module";
import { JQGridModule } from 'tcm-base-grid';
import { environment } from "../environments/environment";

// import your library
import { FundModule} from 'tcm-fund-module';

//Bootstrap application using TCM Core Bootstrap
export function startupServiceFactory(startupService: IAppBootstrap): Function {
    return () => {
        return startupService.Bootstrap('FundModule').then((result => {
            return true;
        })).catch((error) => {
            return false;
        });
    };
}
//Configure Translation service.
export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TCMCoreModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [Http]
        }),
        HttpModule,
        JQGridModule,
        FundModule
    ],
    providers: [
        { provide: LOCALE_ID, useValue: 'sv-SE' },
        {
            provide: APP_INITIALIZER,
            useFactory: startupServiceFactory,
            multi: true,
            deps: ['IAppBootstrap']
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

and in your route.config.ts file :

import { RouteInfo, ContainerComponent } from "tcm-base-module";
import { FundInformationComponent } from '../library/index';
import { FundOverviewComponent } from '../library/index';
import { DistributorInformationComponent } from '../library/index';
import { DistributorOverviewComponent } from '../library/index';

export const MAIN_ROUTES: RouteInfo[] = [
 
    { path: 'fund', component: ContainerComponent, display: true, id: 'fund', title: 'Fund', icon: '', class: 'dropdown', ordinal: 2,
        children: [
            { path: '', redirectTo: 'fundoverview', pathMatch: 'full', display: false },
            { path: 'fundoverview', component: FundOverviewComponent, display: true, id: 'fundoverview', title: 'Fund Overview', icon: '', class: 'dropdown', ordinal: 1 },
            { path: 'fundinfo', component: FundInformationComponent, display: true, id: 'fundinfo', title: 'Fund Information', icon: '', class: 'dropdown', ordinal: 2 },
            { path: 'distoverview', component: DistributorOverviewComponent, display: true, id: 'distoverview', title: 'Distributor Overview', icon: '', class: 'dropdown', ordinal: 3 },
            { path: 'distinfo', component: DistributorInformationComponent, display: true, id: 'distinfo', title: 'Distributor Information', icon: '', class: 'dropdown', ordinal: 4 },
        ]
    }
]

Component information

Specifies the id of the components that is used for navigation. Also a short description of what components are avalible in the module.

| PageID | Component | Description| |------------ | -------------|------------ | |fundoverview| FundOverviewComponent| Shows a grid of all the funds.| |fundinfo| FundInformationComponent| Shows detailed information about a specific fund. | |distinfo| DistributorInformationComponent|Shows a grid of all the distributors.| |distoverview| DistributorOverviewComponent| Show detailed information about a specific Distributor.|

History

• Version number
  • Changes that has been done