11.0.5 • Published 5 years ago
@vlah.io/ngx-dom-cell v11.0.5
@vlah.io/ngx-dom-cell
Set of reusable Angular components to display table cell's.
Usage (code example)
<span [vlahioCalendarCell]="'12/05/2019'"></span>
<span [vlahioNumberCell]="60.54"> </span>
<span [vlahioSquareFeetCell]="58.25"></span>
<span [vlahioTextCell]="'YES'"></span>
<span [vlahioYearCell]="2019"></span>
<span [vlahioYearsCell]="24"></span>
<span [vlahioDaysCell]="4"></span>
<span [vlahioMonthCell]="6"></span>
<span [vlahioMonthCell]="'December'"></span>
<span [vlahioDayCell]="24"></span>
<span [vlahioDayCell]="'Monday'"></span>
<span [vlahioPercentCell]="6.5"></span>
<span [vlahioPercentCell]="'6.5'"></span>
<span [vlahioPerThousandCell]="24.2"></span>
<span [vlahioPerThousandCell]="'24.2'" [trend]="-100"></span>
<span [vlahioTextCell]="'left'" [cls]="'vlahio-fm'"></span>
<span [vlahioTextCell]="'center'" [cls]="'vlahio-fm vlahio-fm-c'"></span>
<span [vlahioTextCell]="'right'" [cls]="'vlahio-fm vlahio-fm-r'"></span>
<span [vlahioUsdCurrencyCell]="1825.5656" [digits]="3" [trend]="trend"></span>
<span [vlahioGbpCurrencyCell]="1825.56"></span>
<span [vlahioEurCurrencyCell]="1825.56"> </span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-ron'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-chf'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-bgn'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-hrk'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-czk'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-dkk'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-huf'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-isk'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-nok'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-pln'"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-rub'"></span>
<span [vlahioCurrencyCell]="1825.5656" [cls]="'vlahio-mn-sek'" [digits]="3"></span>
<span [vlahioCurrencyCell]="-1825.56" [cls]="'vlahio-mn-try'" [trend]="trend"></span>
<span [vlahioCurrencyCell]="1825.56" [cls]="'vlahio-mn-uah'" [trend]="-10"></span>
<span [vlahioCurrencyCell]="null" [cls]="'vlahio-mn-uah'"></span>
<span vlahioInfinityCell></span>
<span [vlahioInfinityCell]="null"></span>
<span [vlahioInfinityCell]="true"></span>
<span [vlahioSquareMetreCell]="58.25"></span>
<span [vlahioUpDownArrow]="trend"></span>
<span><span [vlahioUpDownArrow]="trend"></span> 45</span>
Dom-Cell Worker Services
constructor(private upDownArrowWorker: UpDownArrowWorker,
private trendElementWorker: TrendElementWorker,
private trendCellWorker: TrendCellWorker
) {
}
ngOnInit(): void {
// this.upDownArrowWorker.render(val: number): HTMLSpanElement | undefined
const upDownArrowWorker = this.upDownArrowWorker.render(10);
// this.trendElementWorker.render(trend: number, parent: HTMLElement, refChild: ChildNode): void
const parent = this.renderer.createElement('span');
const refChild = this.renderer.createText('45.56');
this.renderer.appendChild(parent, refChild);
const trendElementWorker = this.trendElementWorker.render(10, parent, refChild);
// this.trendCellWorker.render(txt: any, cls?: string | string[], options: TrendCellWorkerOptionsInterface = {}): SafeHtml | null
const el = this.trendCellWorker.render(45.56, 'vlahio-mn-mn vlahio-mn-gbp', {trend: 10});
}
CSS styles
/* You can add global styles to this file, and also import other style files */
@import "../../ngx-dom-cell/src/assets/css/ngx-dom-cell.css";
@import "../../ngx-dom-cell/src/assets/css/ngx-dom-cell-various.css";
@import "../../ngx-dom-cell/src/assets/css/ngx-dom-cell-table.css";
For more details read here.