UPDATE NPM PACKAGE

build the code npm run build
publish the code npm publish

CMS DECORATORS

This file inculdes the decorators a angular theme can use. You need webpack to remove this from the output.

Blocks

Components with input. These are the building blocks of the page. Think of text, images, but also more complex, like cards, carousels, steps, etc. Component can have inputs and nested content. This can be set on the variables above, see Input Preferably use ContentChildren for nested content. This is performance wise better. (and animations on collapse work better) ng content is always displayed, just not visible. Where as contentchildren get readded to the dom I think.

Templates

Template are Blocks with router-outlet. They should get input through

 constructor(route: ActivatedRoute) {
    route.data.subscribe(d => {
      this.inputVar = d['inputVar'];
    });
  }

and add @BlockInput on the variables themselves.

Directives

We can use directives for many things.

Service scope

Most notably you can use them to create new service instance, with like @host, @self, @skipself, @optional. This way inside a block you can set the items you want to get from the api and display. Like this way you can create a simple apiService and have directives show the data based on inputs.

styling

We can set styling through directives. Be aware that most of the time you need to set display to block.

Animations (not doing)

We had an animation decorator. We decided to exclude this, because the data section for angular, is per block, inside that block.

It was also possible to do with routing, but required every block to implement the ability to have animations.

solution

We decided to use directives. Directives are easier to set, but also hold alot of input variables. For the animations to work we need all blocks to allow animations builders and the block should probably be not inline, so animations actually work. SEE animations plugin

INPUTS

On each @Input() (and in some cases just on the varialbe(template)), you can put an input. This input will then be data the user can set in the page manager plugin.