Loadable content

Loadable content has been created to make it easier to show when data or content is being loaded. NgOP provides you simple component that makes all the effort for you and all you need to do is to tell it is your data is loading or not. Content will be shown when data is ready, otherwise one of the defined application's loaders will be shown.

Setup

First thing you need to do is to import OpContentModule module there, where you want to use op-content.

@NoMogule({
    imports: [
        ...,
        OpContentModule,
    ],
})
export class SomeModule {}

This module provides op-content component which you can use in you templates.

<op-content>
    <ng-template>You content</ng-template>
</op-content>

Showing loader

op-content has an input isLoading of type boolean | undefined. To show loader instead of content you only have to set this input as true. Setting it back to false will show contents of ng-template.

<op-content [isLoading]="true">
    <ng-template>You content</ng-template>
</op-content>

op-content will use default loader defined in OpCoreModule.forRoot().

Example

Example page

Using loader different than default one

You can also use different loader that default one by providing its name to placeholder input.

It is required that this loader will also be defined in OpCoreModule.forRoot(). Assuming custom loader is CustomLoaderComponent you could define it under name custom like this:

OpCoreModule.forRoot({
    placeholders: {
        ...,
        custom: CustomLoaderComponent,
    },
    declarations: [
        ...,
        CustomLoaderComponent,
    ],
}),

caution

This component have to be defined in a module that will be included in main injector.

Template would then look like this:

<op-content [isLoading]="true" [placeholder]="'custom'">
    <ng-template>You content</ng-template>
</op-content>

Example

Example page

Showing placeholder over the content

By default op-content shows either content or loader. You can change it and make you loader be shown over the content. To do this you have to use a loader that which has its cover option set to true.

Such loader would look like this:

@OpLoader({
    cover: true,
})
@Component({ ... })
export class CoveringPlaceholderComponent {}

Before we can use it we need to register it in OpCoreModule. We will give it a name covering:

OpCoreModule.forRoot({
    placeholders: {
        ...,
        covering: CoveringPlaceholderComponent,
    },
    declarations: [
        ...,
        CoveringPlaceholderComponent,
    ],
}),

<op-content [isLoading]="true" [loader]="'covering'">
    <ng-template>You content</ng-template>
</op-content>

Example

Example page

Preserving component state

When loader is of covering type, content will always be present therefore its state will not change. When loader is not of covering type, showing it will result in removal of existing content. That means the state of the content will be lost.

You can tell the plugin that you want to preserve the content by setting keepState flag to true.

<op-content [keepState]="true">
    <ng-template>You content</ng-template>
</op-content>

Example

Example page