We are happy to announce that with the release of Smart HTML Elements ver. 4.1.0, we added "Using with Angular" example for each web component. These Angular examples are available in the Demos section and will help you to use our Web Components in your current or future Angular projects. The source code is included in the download package and can be found in the demos/angular/ folder. The full list of changes in ver.4.1.0 can be found here: https://www.htmlelements.com/docs/release-notes/.
To make Angular work with Web Components, we add the CUSTOM_ELEMENTS_SCHEMA to the app module and import the Smart Elements
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import '@smarthtmlelements/smart-elements/source/smart.elements.js';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
Below, we put the Docking Layout component's settings.
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { setTimeout } from 'timers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent implements AfterViewInit {
layout: any = [
{
type: 'LayoutGroup',
orientation: 'horizontal',
items: [
{
id: 'item0',
label: 'Tabs 0',
autoHide: true,
autoHidePosition: 'left',
tabPosition: 'bottom',
items: [{
label: 'Tab A',
selected: true,
content: 'What is Lorem Ipsum?\n' +
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of' + 'type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in ' + 'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n' +
'Why do we use it?\n' +
'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal ' + 'distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their' + 'default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on ' + 'purpose (injected humour and the like).'
}]
},
{
type: 'LayoutGroup',
items: [
{
tabPosition: 'bottom',
type: 'LayoutPanel',
id: 'tabPanel',
label: 'Input',
items: [{
label: 'TextBox Tab',
content: '<smart-multiline-text-box id="multiLine">Write more text here ...</smart-multiline-text-box>'
},
{
label: 'Slider Tab',
content: '<smart-slider id="slider"></smart-slider>'
}],
size: '50%'
},
{
type: 'LayoutPanel',
label: 'Output',
items: [
{
id: 'outputTab',
label: 'Output',
headerPosition: 'none',
content: 'Write more text here ...'
}
]
}
],
orientation: 'vertical'
}
]
}]
ngAfterViewInit(): void {
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
document.getElementById('tabPanel').addEventListener('change', (event: any) => {
if (event.target instanceof window['Smart'].Slider) {
document.getElementById('outputTab').innerHTML = event.detail.value;
}
else if (event.target instanceof window['Smart'].MultilineTextBox) {
document.getElementById('outputTab').innerHTML = event.target.value;
}
else if (event.target.tagName === 'Smart-TABS') {
const selectedTabItem = event.target.getElementsByTagName('smart-tab-item')[event.target.selectedIndex];
if (selectedTabItem === undefined) {
return;
}
if (selectedTabItem.label.toLowerCase().indexOf('slider') > -1) {
document.getElementById('outputTab').innerHTML = selectedTabItem.querySelector('smart-slider').value;
}
else if (selectedTabItem.label.toLowerCase().indexOf('textbox') > -1) {
document.getElementById('outputTab').innerHTML = selectedTabItem.querySelector('smart-multiline-text-box').value;
}
}
});
}
}
}
In this post, we will show you how to define a Custom Element with Smart Framework. We will create a Material Color Picker custom element.
1. Define the Custom Element. To define a new custom element with Smart Framework, we need to call the Smart function with two parameters - the tag name and the Class with the logic.
Smart('smart-colors', class SmartColors extends Smart.BaseElement {
}
2. Smart Framework gives us useful things like Templates, Data Binding, Typed Properties, Lifecycle callbacks, Event Handling. Read more about this https://www.htmlelements.com/docs/base-element/. In our Custom Element, we will use some of these features. We will use the 'ready' lifecycle callback. It is invoked once, when the element is attached for first time. We use this function to create and initialize the custom element. The 'properties' definition includes a property called 'color'. This property has default value - '#fff' and its type is 'string'. This means that when you try to set a 'bool', 'date', 'numeric' value, the element will throw an error with 'Invalid property type'. To raise the 'change' event, we use the '$.fireEvent' method.
The latest version of Smart HTML Elements brings important new features to our Smart Grid Web Component. It is now possible to display data hierarchies in the web component. The Grid allows you to display data as a combination of Tree and Grid. The Tree Grid mode has full support for data sorting, data filtering and data editing. The Grouping features allows you to group data by columns. The context menu feature allows you to quickly add a context menu functionality to the Grid.
Tree Grid
Tree Grid mode allows you to display hierarchical data in the Grid and make the component work like a hybrid between Tree and Grid.
This post shows how to create a Grid Web component and initialize it from a DIV tag
The next version ver3.1.0 of Smart HTML Elements will introduce an alternative way to create a Web Component on demand from an existing HTML Element.
Let's look at the sample below. In the 'index.htm' web page code, we see a HTMLDIVElement(DIV tag) with id="grid". We will use that HTML element to create a new Grid Web Component instance.
The 'index.js' file is defined as a Javascript Module. In that module our grid web component is created on window.onload, within a function called 'init()'. That is achieved by calling the Smart.Grid function and passing as a first argument the 'id' of the DIV tag and as a second argument the initialization object with the Grid web component's dataSource, columns and other configuration options. As a result, our DIV tag is replaced with a 'smart-grid' tag and a Grid is displayed.
That approach is useful, when we want to update an existing application with minimum changes or to create a Smart Web Component on demand with ES6 code.
The latest version of Smart HTML Elements, brings a full featured Chart Custom Element with more than 30 different Data Visualization options. The Chart Types supported are listed: Chart Types.
Our Chart Custom Element is written in JavaScript and CSS. It does not depend on any other third-party scripts. The rendering is achieved with SVG and HTML5 canvas. The Chart works well on mobile browsers and is the most feature-complete chart available in the web components world. Data displayed on the Chart can be formatted in multiple different ways. For example, the charting element has a property called 'formatSettings' with the following data formatting options.
decimalSeparator - character used as a decimal separator. If not specified, the default separator is '.'
thousandsSeparator - character used as thousands separator. Default value is ','
decimalPlaces - number of digits after the decimal separator. Default value is 2 for floating point numbers.
negativeWithBrackets - boolean which specifies whether to display negative numbers in brackets. Default value is false.
prefix - any string which will be added as a prefix. Default value is empty.
sufix - any string which will be added as a sufix. Default value is empty.
dateFormat - optional date format string. This property is applicable only when displaying Date objects.
The image below illustrates the Axes supported by the custom element. Smart.Chart has two main types of axes - valueAxis and xAxis. Typically the valueAxis represents the vertical axis in the chart although you may choose to rotate the axes and in this case the valueAxis will be displayed horizontally.
Smart.Chart also ships with 32 built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme property of the chart. The available value are from 'scheme01' to 'scheme32'. By setting its 'theme' property, users can Data Visualize their graphics in 'Light' and 'Dark' mode. Smart.Chart is based on: jqxChart.
We invite you to look at our Chart Custom Element demos: Chart overview
This post shows how to bind to the Grid Web Component events. The code below initializes the Grid instance and binds to the 'click' event. Within the event handler, we can get details about which part of the Grid was clicked - Cell, Row or Column. This is achieved by utilizing the 'event.path' array. It is also important to note that each Data Grid Column has 'data-field' attribute and each Row has 'data-id' attribute. The data source, which is used in the example is available in the 'data.js' file from the download package.
Smart('#grid', class {
get properties() {
return {
dataSource: new Smart.DataAdapter(
{
dataSource: getCountriesData(),
dataFields:
[
'ID: number',
'Country: string',
'Area: number',
'Population_Urban: number',
'Population_Rural: number',
'Population_Total: number',
'GDP_Agriculture: number',
'GDP_Industry: number',
'GDP_Services: number',
'GDP_Total: number'
]
}),
columns: [
'Country',
'Area',
'Population_Rural',
'Population_Total',
'GDP_Total'
]
}
}
});
window.onload = function() {
grid.addEventListener('click', function(event){
const path = event.path;
let cell = null;
let row = null;
let column = null;
for(let i = 0; i < path.length; i++) {
const node = path[i];
if (node.nodeName === 'SMART-GRID-CELL') {
cell = node;
}
if (node.nodeName === 'SMART-GRID-ROW') {
row = node;
}
if (node.nodeName === 'SMART-GRID-COLUMN') {
column = node;
}
}
if (row) {
alert(row.getAttribute('data-id'));
}
if (column) {
alert(column.getAttribute('data-field'));
}
if (cell) {
alert(cell.innerText);
}
});
}
The newest version of our framework marks the availability of a new AutoComplete Input tag. We needed such lightweight component for the purposes of our Grid web component. There, it is used as an inline cell editor. You can check it out here: grid-editing-cell-auto-complete.
Here is how the web component looks like when you add it to your web page:
All you need to do is to add a reference to smart.elements.js, smart.default.css and type the following:
<smart-input data-source="[South America, North America, Asia, Africa, Europe]"></smart-input>
