Components

Small reusable pieces of UI

Overview

Components are pieces of reusable user interface, which can be used in views. Example for components are view Top-Toolbar, view Bottom-Toolbar, etc.

The Component has the same lifecycle as a view. Checkout the view lifecycle reference for more info.

Example

Let us define our component. The component here is a toolbar to be used across the views of our app.

It has "left-arrow" icon, which can be clicked by the user and it will try to navigate over a route called "prior".

It also has a title, which can be provided by the "hosting" view.

Component Html
Component Code
Component Html

<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link"><i class="icon f7-icons" data-dms-route="prior">arrow_left</i></a>
</div>
<div class="title">{{title}}</div>
<div class="right"></div>
</div>
</div>
Component Code

import { Component} from "@dms";
@Component()
export class ToolbarTop {
}

Once we have the component defined, we can use it in our view in the following way:

<div class="page">
<dms-component path="Components/ToolbarTop" [title]="System Info"></dms-component>
<div class="page-content">
<div class="list">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">
<div class="item-header">{#lblAppVer#}</div>
<span data-bind="text: appVersion"></span>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">
<div class="item-header">{#lblAppCode#}</div>
<span>SLA</span>
</div>
</div>
</div>
</li>
....
</ul>
</div>
</div>
</div>

We are using the top-toolbar component on line #2 by providing path attribute, which points to the html filename (without the file extension) where the component is defined. We also provide a [title] attribute. Any attribute, which is wrapped in square brackets, will be considered as value for a variable defined in the component. In this case the value for [title] will replace the {{title}} string in the component's html.

And the outcome will be:

The SYSTEM INFO label comes here because on line #2 we have [title]="System Info".