App-Engine

App-Engine is a set of useful tools that will make it easier to create modular applications and make it easier to keep your application's user experienc consistent.

Root component

App-Engine will only work within op-root component. You can use this component in your application's main html file like this:

app.component.html

<op-root>
    ...
</op-root>

Core module

Core module is a heart of App-Engine.

It provides and initialises all required services and provides all common (to NgOP) components.

Initialisation

To make it work you need to import OpCoreModule in the main injector. The easiest way to do it is to use OpCoreModule.forRoot() in your application's main module, or use it in other module that will be imported by this main module.

Basic initialisation looks like this:

app.module.ts

import { OPCoreModule } from 'ngop/core';

@NgModule({
    imports: [
        OpCoreModule.forRoot(),
    ],
})
export class AppModule {}

Configuration

OpCoreModule.forRoot() takes configuration object as input. This configuration object is described by IOpCoreConfig interface.

interface IOpCoreConfig {
    placeholders?: { [k: string]: Type<any> };
    modals?: { [k: string]: Type<any> };
    notices?: { [k: string]: Type<any> };
}

Currently it allows you to define configuration for placeholders, modules and notices (all optional).

Placeholders

The reason for having a loading placeholders is to provide consistency to the dynamically loaded data and code. Loading placeholders will be used by lazy loading as view placeholders until code or data fetch ends.

NgOP requires default loading placeholder to be able to use it automaticaly, wherever needed, without you having to do anything.

Loading placeholder is a simple Angular component annotated with @OpPlaceholder():

default-placeholder.component.ts

import { OpPlaceholder } from 'ngop/core';

@OpPlaceholder()
@Component({
    template: 'Loading...',
})
export class DefaultLoadingPlaceholderComponent {}

Configuration for placeholders should be an object that contains placeholder components assigned to their names. For example, we can assign our component DefaultLoadingPlaceholderComponent as a "default" loader. Configuration would look like this:

import { OPCoreModule } from 'ngop/core';
import { DefaultLoadingPlaceholderComponent } from './default-loading-placeholder.component';

@NgModule({
    imports: [
        OpCoreModule.forRoot({
            placeholders: {
                default: DefaultLoadingPlaceholderComponent,
            },
        }),
    ],
    declarations: [
        DefaultLoadingPlaceholderComponent,
    ],
})
export class AppModule {}

From now on NgOP will always use our "default" placeholder whenever it needs it and without you having to do anything.

We could also add additional "custom" placeholder component called CustomLoadingPlaceholderComponent.

OpCoreModule.forRoot({
    placeholders: {
        default: DefaultLoadingPlaceholderComponent,
        custom: CustomLoadingPlaceholderComponent,
    },
})

NgOP will have now access to those two components and you will be able to explicitly say which one should be used where you need them.

note

Make sure you will put both such placeholder components like DefaultLoadingPlaceholderComponent and CustomLoadingPlaceholderComponent into module's declarations, so that Ivy will not complain about it.