After installation your application comes with an example on how to use custom posts. The custom post movie is registered and can be accessed at #/movies

Architecture

To make it easy to overwrite almost anything, custom posts are split into four different entities:

List page

#/movies

Item page

When you click on an item on the list page:

#/movies/the-dark-knight-rises

List component

Basically here just a card:

Item component

Just the content of the item page:

Add your own custom posts

Pages

Under config/pages create a two files list-<yourCustomType>.ts:

import { Component } from '@angular/core';
import { ListPage } from '../../src/pages/list/list';

@Component({
    selector: 'page-<yourCustomType>-list',
    templateUrl: '../../src/pages/list/list.html'
})
export class List<yourCustomType>Page extends ListPage {
    type: string = '<yourCustomType>';
}

and item-<yourCustomType>.ts:

import { Component } from '@angular/core';
import { ItemPage } from '../../src/pages/item/item';

@Component({
    selector: 'page-<yourCustomType>-item',
    templateUrl: '../../src/pages/item/item.html'
})
export class Item<yourCustomType>Page extends ItemPage {
    type: string = '<yourCustomType>';
}

now all we need to do is register those pages:

Open config/pages/index.ts and import ItemMoviePage and ListMoviePage :

import { CustomItemPage } from './item-<yourCustomType>';
import { CustomListPage } from './list-<yourCustomType>';

Under MenuMapping add those properties (respect the naming convention <yourCustomType>Item):

<yourCustomType>Item: CustomItemPage,
<yourCustomType>: CustomListPage,

Now in menu.json if you want to open those pages you can reference them using <yourCustomType>Item or <yourCustomType> on the page property.

Under DeepLinkerLnks add those routes:

{ component: CustomItemPage, name: 'My custom item', segment: '<yourCustomType>/:slug' },
{ component: CustomListPage, name: 'My custom list', segment: '<yourCustomType>' },

And to finish under PAGES add:

CustomItemPage,
CustomListPage,

If you open http://localhost:8100/#/<yourCustomType> or http://localhost:8100/#/<yourCustomType>/foobar you will have the following errors:

The component "<yourCustomType>-list" does not exist and The component "<yourCustomType>-item" does not exist

It is time to create your list and item components:

Components

Under config/components you will find one template for list and one template for item:

Copy both and rename all the files from template-item to <yourCustomType>-item and from template-list to <yourCustomType>-list. open .ts and .scss files and replace template with <yourCustomType>.

to finish we need to register those new components:

Open config/components/index.ts and add all references to <yourCustomType>ListComponent and <yourCustomType>ItemComponent :

import { <yourCustomType>ListComponent } from './<yourCustomType>-list/<yourCustomType>-list';
import { <yourCustomType>ItemComponent } from './<yourCustomType>-item/<yourCustomType>-item';

Under ComponentsMapping add the following:

'<yourCustomType>-list': <yourCustomType>ListComponent,
'<yourCustomType>-item': <yourCustomType>ItemComponent,

Then under COMPONENTS add:

<yourCustomType>ListComponent,
<yourCustomType>ItemComponent,

Now opening If you open http://localhost:8100/#/<yourCustomType> should list your custom posts IDs and clicking on them should open a #/<yourCustomType>/:slug that will display your post ID.

It is now up to you to display the data you want the way you want it.

Add Custom Posts