Visualization Components
Reference to the Visualizations SDK components.
The Railz Visualizations SDK contains a set of components that you can use to build a dashboard that matches your brand's look and feel:
- Railz Visualizations
- Railz Statements Chart
- Railz Transactions Control
- Railz Income Statements
- Railz Credit Score
- Railz Financial Ratios
- Railz Bank Accounts
- Railz Progress Bar
- Railz Loading Indicator
- Railz Error Image
Railz Visualizations
The Railz Visualizations component allows you to choose between Railz Statements Chart, Railz Transactions Control, Railz Income Statements, Railz Credit Score, Railz Financial Ratios, Railz Bank Accounts components below based on the reportType
parameter.
Use this component if you are not sure what component you need for your report type.
Examples
<railz-visualizations [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "sandbox"
}'></railz-visualizations>
<RailzVisualizations configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "sandbox"
}} />
<railz-visualizations configuration='{
"token": "your token..."
}' filter='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "sandbox"
}'></railz-visualizations>
Web Component parameters should be strings and not an object.
Properties
See components properties for instructions on the specific properties you can use for each report type.
- Balance Sheets, Income Statements, Cashflow Statements: Railz Statements Chart Properties
- Bills, Invoices: Railz Transactions Control Properties
- Expenses, Revenue: Railz Income Statements Properties
- Credit Score: Railz Credit Score Properties
- Bank Accounts: Railz Bank Accounts Properties
Railz Statements Chart
The Railz Statements Chart component is used to display a Stacked Bar line chart for balance sheets (balanceSheets
), income statements (incomeStatements
) and cashflow statements (cashflowStatements
) based on the reportType
parameter.
<railz-statements-chart [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "balanceSheets",
"serviceName": "sandbox",
"reportFrequency": "month"
}'></railz-statements-chart>
<RailzStatementsChart configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"reportFrequency": "month",
"reportType": "balanceSheets",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} />
<railz-statements-chart configuration='{
"token": "your token..."
}' filter='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "balanceSheets",
"serviceName": "sandbox",
"reportFrequency": "month"
}'></railz-statements-chart>
Output

Railz Statements chart component in Railz Visualizations SDK. Click to Expand.
Customizations
<RailzStatementsChart configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"reportFrequency": "month",
"reportType": "balanceSheets",
"businessName": "your business name...",
"serviceName": "sandbox"
}} options={{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"20px","marginTop":"20px"}},"title":{"style":{"color":"#ffffff","justifyContent":"left","fontFamily":"Inter","fontSize":"24px"}},"chart":{"colors":["#ff0000","#ff6900","#d34000","#ff4545","#cccccc"],"fontFamily":"Inter","backgroundColor":"rgba(0,0,0,0.91)","label":{"fontFamily":"Inter","fontSize":"18px","color":"#ffffff"},"legend":{"itemStyle":{"fontFamily":"Inter","fontSize":"16px","color":"#cccccc"}}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"date":{"format":"yy","locale":"fr","prefix":"Quarter "},"tooltip":{"description":"Tooltip Customized"}}}} />

Railz Statements Chart Component customized in Railz Visualizations SDK. Click to Expand.
See Railz Statements Chart component properties for instructions on the specific properties you can use.
Railz Transactions Control
The Railz Transactions Control component is used to display a Progress Control for invoices
and bills
based on the reportType
parameter. It uses the Railz Progress Bar component.
<railz-transactions-control [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "quickbooks"
}'></railz-transactions-control>
<RailzTransactionsControl configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "quickbooks"
}} />
<railz-transactions-control configuration='{
"token": "your token..."
}' filter='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "sandbox"
}'></railz-transactions-control>
Output

Railz Transactions Control Component in Railz Visualizations SDK. Click to Expand.
Customizations
<RailzVisualizations configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-01-01",
"endDate": "2022-01-01",
"businessName": "your business name...",
"reportType": "bills",
"serviceName": "sandbox"
}} options={{"container":{"style":{"border":0,"backgroundColor":"black","borderRadius":"0"}},"title":{"style":{"color":"#cccccc","fontSize":"24px"},"text":"Balance Sheet"},"bar":{"titleStyle":{"color":"#ffffff"},"titleValueStyle":{"color":"#ffffff"},"subTitle1Style":{"color":"#ffffff"},"subTitleValue1Style":{"color":"#ffffff"},"subTitle2Style":{"color":"#ffffff"},"subTitleValue2Style":{"color":"#ffffff"},"barStyle":{"background":"#cdf8c4","borderRadius":"5px"},"progressStyle":{"background":"#2e6521","borderRadius":"5px"}},"loadingIndicator":{"fillColor":"#4DAE37", "textStyle":{color: "#4DAE37"}},"errorIndicator":{"fillColor":"#FF7575", "textStyle":{color: "#FF7575"}}}} />

Railz Transactions Control Component customized in Railz Visualizations SDK. Click to Expand.
See Railz Transactions Control component properties for instructions on the specific properties you can use.
Railz Income Statements
The Railz Income Statements component is used to display a Pie Chart for therevenue
and expenses
based on the reportType
parameter.
Examples
<railz-income-statements [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "expenses",
"serviceName": "quickbooks",
"reportFrequency": "month"
}'></railz-income-statements>
<RailzIncomeStatements configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"reportFrequency": "month",
"reportType": "expenses",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} />
<railz-income-statements configuration='{
"token": "your token..."
}' filter='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "expenses",
"serviceName": "quickbooks",
"reportFrequency": "month"
}'></railz-income-statements>
Output

Railz Income Statements Component in Railz Visualizations SDK. Click to Expand.
Customizations
<railz-income-statements [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "expenses",
"serviceName": "quickbooks",
"reportFrequency": "month"
}' [options]='{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"0"}},"title":{"style":{"color":"#ffffff","justifyContent":"center","fontFamily":"Inter","fontSize":"24px"}},"chart":{"colors":["#ff0000","#ff6900","#d34000","#ff4545","#cccccc"],"fontFamily":"Inter","backgroundColor":"rgba(0,0,0,0.91)","label":{"fontFamily":"Inter","fontSize":"18px","color":"#ffffff"},"legend":{"itemStyle":{"fontFamily":"Inter","fontSize":"16px","color":"#cccccc"}},"pie":{"total":{"color":"#ffffff","fontSize":"36px"},"legendName":{"color":"#ffffff","fontSize":"12px"},"legendValue":{"color":"#ffffff","fontSize":"12px"},"positive":{"color":"#259821","fontSize":"26px"},"negative":{"color":"#cc0000","fontSize":"26px"}}},"loadingIndicator":{"fillColor":"#ffffff","textStyle":{"color":"#ffffff","fontWeight":"bold"}},"errorIndicator":{"fillColor":"#FF7575","textStyle":{"color":"#ffffff","fontWeight":"bold"}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"title":"Your Expenses","tooltip":{"description":"Tooltip Customized"}}}' >
</railz-income-statements>
<RailzIncomeStatements configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"reportFrequency": "month",
"reportType": "expenses",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} options={{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"0"}},"title":{"style":{"color":"#ffffff","justifyContent":"center","fontFamily":"Inter","fontSize":"24px"}},"chart":{"colors":["#ff0000","#ff6900","#d34000","#ff4545","#cccccc"],"fontFamily":"Inter","backgroundColor":"rgba(0,0,0,0.91)","label":{"fontFamily":"Inter","fontSize":"18px","color":"#ffffff"},"legend":{"itemStyle":{"fontFamily":"Inter","fontSize":"16px","color":"#cccccc"}},"pie":{"total":{"color":"#ffffff","fontSize":"36px"},"legendName":{"color":"#ffffff","fontSize":"12px"},"legendValue":{"color":"#ffffff","fontSize":"12px"},"positive":{"color":"#259821","fontSize":"26px"},"negative":{"color":"#cc0000","fontSize":"26px"}}},"loadingIndicator":{"fillColor":"#ffffff","textStyle":{"color":"#ffffff","fontWeight":"bold"}},"errorIndicator":{"fillColor":"#FF7575","textStyle":{"color":"#ffffff","fontWeight":"bold"}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"title":"Your Expenses","tooltip":{"description":"Tooltip Customized"}}}} />

Railz Visualizations SDK - Railz Income Statements Customized Component. Click to Expand.
See Railz Income Statements Component Properties for instructions on the specific properties you can use.
Railz Credit Score
The Railz Credit Score component is used to display the credit score and rating for a business based on the endDate
parameter.
Examples
<railz-credit-score [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "railzScore",
"serviceName": "quickbooks"
}'></railz-credit-score>
<RailzCreditScore configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "railzScore",
"serviceName": "quickbooks"
}} />
<railz-transactions-control configuration='{
"token": "your token..."
}' filter='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "railzScore",
"serviceName": "quickbooks"
}'></railz-transactions-control>
Output

Railz Credit Score Component in Railz Visualizations SDK. Click to Expand.
Customizations
<railz-credit-score [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-03-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "railzScore",
"serviceName": "quickbooks"
}' [options]='{"container":{"style":{"backgroundColor":"#000000"}},"chart":{"backgroundColor":"#000000","gauge":{"score":{"color":"#ffffff"},"rating":{"color":"#ffffff"},"colorRanges":{"525":"#a91a1a","575":"#af3333","625":"#98623d","675":"#6DE18D","750":"#6DE18D","default":"red"}},"label":{"color":"#ffffff"}},"title":{"style":{"fontSize":"24px","justifyContent":"center","color":"#ffffff"}},"subTitle":{"style":{"fontSize":"14px","textAlign":"center","margin":0,"color":"#ffffff"},"position":"top","dateVisible":false},"loadingIndicator":{"fillColor":"#ffffff","textStyle":{"color":"#ffffff"}},"errorIndicator":{"fillColor":"#ffffff","textStyle":{"color":"#ffffff"}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"red"}},"content":{"title":"Your Credit Score","subTitle":"The result below is determined by your business data"}}' >
</railz-credit-score>
<RailzCreditScore configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-01-01",
"endDate": "2022-01-01",
"businessName": "your business name...",
"reportType": "railzScore",
"serviceName": "quickbooks"
}} options={{"container":{"style":{"backgroundColor":"#000000"}},"chart":{"backgroundColor":"#000000","gauge":{"score":{"color":"#ffffff"},"rating":{"color":"#ffffff"},"colorRanges":{"525":"#a91a1a","575":"#af3333","625":"#98623d","675":"#6DE18D","750":"#6DE18D","default":"red"}},"label":{"color":"#ffffff"}},"title":{"style":{"fontSize":"24px","justifyContent":"center","color":"#ffffff"}},"subTitle":{"style":{"fontSize":"14px","textAlign":"center","margin":0,"color":"#ffffff"},"position":"top","dateVisible":false},"loadingIndicator":{"fillColor":"#ffffff","textStyle":{"color":"#ffffff"}},"errorIndicator":{"fillColor":"#ffffff","textStyle":{"color":"#ffffff"}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"red"}},"content":{"title":"Your Credit Score","subTitle":"The result below is determined by your business data"}}} />

Railz Credit Score Component customized in Railz Visualizations SDK. Click to Expand.
See Railz Credit Score component properties for instructions on the specific properties you can use.
Railz Financial Ratios
The Railz Financial Ratios component is used to display a list of financialRatios
and their data over a period of time. It also shows the percentage change value if it exists.
Examples
<railz-financial-ratios [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "financialRatios",
"serviceName": "quickbooks",
"reportFrequency": "month"
}'></railz-financial-ratios>
<RailzFinancialRatios configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"reportFrequency": "month",
"reportType": "financialRatios",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} />
<railz-financial-ratios configuration='{
"token": "your token..."
}' filter='{
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "financialRatios",
"serviceName": "quickbooks",
"reportFrequency": "month"
}'></railz-financial-ratios>
Output

Railz Financial Ratios Component in Railz Visualizations SDK. Click to Expand.
Customizations
<railz-financial-ratios [configuration]='{
"token": "your token..."
}' [filter]='{
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"businessName": "your business name...",
"reportType": "financialRatios",
"serviceName": "quickbooks",
"reportFrequency": "month"
}' [options]='{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"0"}},"title":{"style":{"color":"#ffffff","justifyContent":"center","fontFamily":"Inter","fontSize":"24px"}},"chart":{"colors":["#ff0000","#ff6900","#d34000","#ff4545","#cccccc"],"fontFamily":"Inter","backgroundColor":"rgba(0,0,0,0.91)","label":{"fontFamily":"Inter","fontSize":"18px","color":"#ffffff"},"legend":{"itemStyle":{"fontFamily":"Inter","fontSize":"16px","color":"#cccccc"}}},"ratio":{"header":{"flexDirection":"column"},"select":{"position":"center","container":{"background":"#5b5a5a"},"item":{"color":"white"},"selectedItem":{"color":"black","background":"white"},"style":{"background":"white","color":"black","padding":"10px","width":"30%","borderRadius":"10px","marginTop":"10px"}},"itemContainer":{"border":0,"borderRadius":"20px","boxShadow":"1px -1px 15px 5px #424242","color":"#ffffff","background":"#424242","marginTop":"20px","padding":"20px"},"itemToolTip":{"fillColor":"white"},"itemValue":{"color":"white"},"itemNameText":{"color":"white"},"itemPercentage":{"positive":{"color":"#92fa8f","fontSize":"26px"},"negative":{"color":"#ff6a6a","fontSize":"26px"}},"sparkLine":{"chart":{"backgroundColor":"#000000","colors":["#381da8"],"label":{"color":"#ffffff"},"yAxisStyle":{"gridLineColor":"#ffffff"},"style":{"borderRadius":"10px"}}}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"title":"Your Data Simplified","tooltip":{"description":"Tooltip Customized"}}}}' >
</railz-financial-ratios>
<RailzFinancialRatios configuration={{
"token": "your token..."
}} filter={{
"startDate": "2021-01-01",
"endDate": "2021-12-31",
"reportFrequency": "month",
"reportType": "financialRatios",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} options={{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"0"}},"title":{"style":{"color":"#ffffff","justifyContent":"center","fontFamily":"Inter","fontSize":"24px"}},"chart":{"colors":["#ff0000","#ff6900","#d34000","#ff4545","#cccccc"],"fontFamily":"Inter","backgroundColor":"rgba(0,0,0,0.91)","label":{"fontFamily":"Inter","fontSize":"18px","color":"#ffffff"},"legend":{"itemStyle":{"fontFamily":"Inter","fontSize":"16px","color":"#cccccc"}}},"ratio":{"header":{"flexDirection":"column"},"select":{"position":"center","container":{"background":"#5b5a5a"},"item":{"color":"white"},"selectedItem":{"color":"black","background":"white"},"style":{"background":"white","color":"black","padding":"10px","width":"30%","borderRadius":"10px","marginTop":"10px"}},"itemContainer":{"border":0,"borderRadius":"20px","boxShadow":"1px -1px 15px 5px #424242","color":"#ffffff","background":"#424242","marginTop":"20px","padding":"20px"},"itemToolTip":{"fillColor":"white"},"itemValue":{"color":"white"},"itemNameText":{"color":"white"},"itemPercentage":{"positive":{"color":"#92fa8f","fontSize":"26px"},"negative":{"color":"#ff6a6a","fontSize":"26px"}},"sparkLine":{"chart":{"backgroundColor":"#000000","colors":["#381da8"],"label":{"color":"#ffffff"},"yAxisStyle":{"gridLineColor":"#ffffff"},"style":{"borderRadius":"10px"}}}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"title":"Your Data Simplified","tooltip":{"description":"Tooltip Customized"}}}} />

Railz Financial Ratios Component customized in Railz Visualizations SDK. Click to Expand.
See Railz Financial Ratios Component Properties for instructions on the specific properties you can use.
Railz Bank Accounts
The Railz Bank Accounts component is used to display a list of bankAccounts
a business has and data related to it.
Examples
<railz-bank-accounts [configuration]='{
"token": "your token..."
}' [filter]='{
"businessName": "your business name...",
"reportType": "bankAccounts",
"serviceName": "quickbooks"
}'></railz-bank-accounts>
<RailzBankAccounts configuration={{
"token": "your token..."
}} filter={{
"reportType": "bankAccounts",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} />
<railz-bank-accounts configuration='{
"token": "your token..."
}' filter='{
"businessName": "your business name...",
"reportType": "bankAccounts",
"serviceName": "quickbooks",
}'></railz-bank-accounts>
Output

Railz Bank Accounts Component in Railz Visualizations SDK. Click to Expand.
Customizations
<railz-bank-accounts [configuration]='{
"token": "your token..."
}' [filter]='{
"businessName": "your business name...",
"reportType": "bankAccounts",
"serviceName": "quickbooks"
}' [options]='{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"0"}},"title":{"style":{"color":"#ffffff","justifyContent":"center","fontFamily":"Inter","fontSize":"24px"}},"table":{"style":{"padding":"30px"},"title":{"color":"white","fontSize":"30px","marginBottom":"16px"},"itemName":{"fontSize":"16px","color":"white"},"itemSeperator":{"display":"none"},"itemValue":{"color":"#94b9ff","fontSize":"20px"}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"title":"Account Balance","tooltip":{"description":"Tooltip Customized"}}}' >
</railz-bank-accounts>
<RailzBankAccounts configuration={{
"token": "your token..."
}} filter={{
"reportType": "bankAccounts",
"businessName": "your business name...",
"serviceName": "quickbooks"
}} options={{"container":{"style":{"border":0,"backgroundColor":"#000000","borderRadius":"0"}},"title":{"style":{"color":"#ffffff","justifyContent":"center","fontFamily":"Inter","fontSize":"24px"}},"table":{"style":{"padding":"30px"},"title":{"color":"white","fontSize":"30px","marginBottom":"16px"},"itemName":{"fontSize":"16px","color":"white"},"itemSeperator":{"display":"none"},"itemValue":{"color":"#94b9ff","fontSize":"20px"}},"tooltipIndicator":{"fillColor":"#ffffff","width":"20px","height":"20px","tooltipTextStyle":{"color":"#ffffff","backgroundColor":"black"},"visible":true},"content":{"title":"Account Balance","tooltip":{"description":"Tooltip Customized"}}}} />

Railz Bank Accounts Component customized in Railz Visualizations SDK. Click to Expand.
See Railz Bank Accounts Component Properties for instructions on the specific properties you can use.
Railz Progress Bar
The Railz Progress Bar component is used to visualize the progress of a transaction, it can be modified to fit your needs.
Examples
<railz-progress-bar reportType="invoices"
[overdueAmount]="2000" [unpaidAmount]="12000" [paidAmount]="15000"></railz-progress-bar>
<RailzProgressBar reportType="invoices"
unpaidAmount={15000} paidAmount={15000} overdueAmount={12000}/>
<railz-progress-bar reportType="invoices"
overdueAmount="2000" unpaidAmount="12000" paidAmount="15000"></railz-progress-bar>
Output

Railz Progress Bar component in Railz Visualizations SDK. Click to Expand.
See Railz Progress Bar component properties for instructions on the specific properties you can use.
Railz Loading Indicator
The Railz Loading Indicator component is a set of basic loading animations that indicates the processing progress.
<railz-loading></railz-loading>
<RailzLoading/>
<railz-loading></railz-loading>
Output
Customizations
Include your Custom Text
<railz-loading loadingText="Loading Data"></railz-loading>
Include your Custom Style
<RailzLoading loadingText="Loading..." fillColor="red" textStyle={{color: "red"}} />
See Railz Loading Indicator component properties for instructions on the specific properties you can use.
Railz Error Image
The Railz Error Image component is used to show an image indicator based on HTTP response codes. See response codes for more details.
Examples
<railz-error-image [statusCode]="202"></railz-error-image>
<RailzErrorImage statusCode={202}/>
<railz-error-image statusCode="202"></railz-error-image>
Output
Customizations
Change Text and Icon Color
<railz-error-image
statusCode="404"
fillColor="red"
textStyle="{'color': 'red'}">
</railz-error-image>
Display Icon Only
<railz-error-image
statusCode="202"
width="170"
height="150"
text="">
</railz-error-image>
See Railz Error Image component properties for instructions on the specific properties you can use.
Updated 7 months ago