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

<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".