Smart Components#

Some features do not require additional code, they just need a clever usage of the power of TypeScript and Web Components. To simplify your life, a few of these are predefined as integrated components - the Smart Components.

Transparent Outlet n-outlet#

This is another outlet that renders into nothing. Normally you would do this:

<div n-router-outlet></div>

But that would place your component in a DIV element. If this is disturbing, just use this:

<n-outlet></n-outlet>

Also, a named variety is available:

<n-outlet name="main"></n-outlet>

Render Finisher n-finish#

Web Components render according their lifecycle. However, if you have a mix of components and regular HTML elements, the behavior can be weird, because the regular elements doesn't have a lifetime. The best solution is to have a pure tree of web components. But if that is not possible and a predictable execution path is necessary, you need to tell the render engine when it's really safe to render the parent element. To do so, add the element <n-finish /> like this:

render() {
  return (
    <ul>
      <some-component></some-component>
      <li></li>
      <li></li>
      <li></li>
      <n-finish />
    </ul>
  )
}

In that example the component waits for the lifecycle events of some-component but will render everything else immediately. If some-component exposes <li> tags too, they could appear after the static ones. If the order matters, the <n-finish> element helps enforcing the execution order.