Not able to display the ngx datatable default footer properly.
Its showing the footer like this
My code
<ngx-datatable
#table
[columnMode]="'force'"
[headerHeight]="50"
[rowHeight]="'auto'"
[footerHeight]="50"
[count]="true"
[limit]="4"
[rows]="data"
>
<ngx-datatable-column [width]=10>
<ng-template let-row="row" ngx-datatable-cell-template>
<span class="circle" [ngClass]="{'red': row.alertCat == 'HIGH','yellow': row.alertCat == 'MEDIUM', 'green': row.alertCat == 'LOW'}"></span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="ID" [width]=10>
<ng-template let-column="column" ngx-datatable-header-template>
<strong class="text-uppercase alertHeading">ID</strong>
</ng-template>
<ng-template let-row="row">
{{row.id}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
use node_modules/#swimlane/ngx-datatable/release/assets/icons.css in your main .scss file:
"styles": [
// ...
"node_modules/#swimlane/ngx-datatable/release/assets/icons.css"
],
If I am not wrong, your footer classes are being overridden by other classes. Inspect them and you will know or provide your icons like from font-awesome.
For ex
.datatable-icon-left {
content: #fa-var-chevron-left;
}
Related
Is there a way on how to use the same code for the confirmation message but the message is different? I just want to reuse the existing code and change only the message instead of creating another function. Is it possible?
<p-dialog [(visible)]="openDialogBox1" [style]="{ width: '50vw' }" modal="true" [closable]="false">
<ng-template pTemplate="header">
<h3>Confirm ABC?</h3>
</ng-template>
<p>Are you sure you want to tag as ABC?</p>
</p-dialog>
<p-dialog [(visible)]="openDialogBox2" [style]="{ width: '50vw' }" modal="true" [closable]="false">
<ng-template pTemplate="header">
<h3>Confirm include the company?</h3>
</ng-template>
<p>Are you sure you want to inlcude the company? This will include the sub unit.</p>
</p-dialog>
Make the Dialogbox as Reusable component.
<p-dialog [(visible)]="openDialogBox" [style]="{ width: '50vw' }"
modal="true" [closable]="false">
<ng-template pTemplate="header">
<h3>{{ messageHeader }}</h3>
</ng-template>
<p>{{ messageBody }}</p>
</p-dialog>
Add the following variables in your ts file of the corresponding component.
#Input() messageHeader!: string;
#Input() messageBody!: string;
Use the component as below where ever you need.
<app-component-name [messageHeader] = "content" [messageBody] = "content"></app-component-name>
Is it possible to somehow put the condition for changing the icon in one line?
Example #1
<ng-template [ngIf]="isMenuCollapsed" [ngIfThen]="open" [ngIfElse]="close">
</ng-template>
<ng-template #open>
<fa-icon [icon]='["fas", "bars"]'></fa-icon>
</ng-template>
<ng-template #close>
<fa-icon [icon]='["fas", "times"]'></fa-icon>
</ng-template>
Example #2
<fa-icon [icon]='["fas", "bars"]' *ngIf="isMenuCollapsed"></fa-icon>
<fa-icon [icon]='["fas", "times"]' *ngIf="!isMenuCollapsed"></fa-icon>
Yes, with method for example:
<fa-icon [icon]='getIcon()'></fa-icon>
In TS something like:
getIcon = () => isMenuCollapsed ? ["fas", "bars"] : ["fas", "times"];
I'm trying to integrate PrimeNG multi select, in that I want to disable some options.
I've used disabled property as mentioned in PrimeNG document but it's not working.
Here are a code snippet and options values:
<p-multiSelect [filter]="true" [virtualScroll]="true" [resetFilterOnHide]="true" optionLabel="label" [(ngModel)]="rowData[col.dataField]"
name="{{col.dataField}}_{{topIndex}}_{{rowIndex}}_{{colIndex}}" [options]="calculationVariables"
defaultLabel="Please Select" autoWidth="false" [style]="{'width':'100%'}" styleClass="priliminary-dorpdown-style {{rowData[col.dataField]?.length == 0 ? 'invalid-control': null}}">
<ng-template let-item pTemplate="selectedItem">
<span class="multicheck-label">{{item.label}}</span>
</ng-template>
<ng-template let-variable pTemplate="item">
<div pTooltip="{{variable.label}}" tooltipPosition="right">
<span class="multicheck-label">{{variable.label}}</span>
</div>
</ng-template>
</p-multiSelect>
You can also disable any item in primeng multiSelect using ng-template, click event and custom style as below:
Method that gets triggered on click event
onClick(disabled: boolean) {
if(disabled) {
event.stopPropagation();
}
}
Customizing the Primeng MultiSelect using ng-template and adding ng-style
<p-multiSelect optionLabel="label"
name="{{col.dataField}}_{{topIndex}}_{{rowIndex}}_{{colIndex}}"
defaultLabel="Please Select"
autoWidth="false"
[filter]="true"
[virtualScroll]="true"
[resetFilterOnHide]="true"
[(ngModel)]="rowData[col.dataField]"
[options]="calculationVariables"
[style]="{'width':'100%'}"
styleClass="priliminary-dorpdown-style {{rowData[col.dataField]?.length == 0 ? 'invalid-control': null}}">
<ng-template let-option pTemplate="item">
<div class="multicheck-label"
(click)="onClick(item.disabled)"
[ngStyle]="item.disabled? {'color': '#ccc', 'cursor': 'default'} : ''"> {{item.label}}
</div>
</ng-template>
<ng-template let-variable pTemplate="item">
<div pTooltip="{{variable.label}}" tooltipPosition="right">
<span class="multicheck-label">{{variable.label}}</span>
</div>
</ng-template>
</p-multiSelect>
In primeng 11 new property "optionDisabled" has introduced.
use case:
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" optionDisabled="inactive"></p-multiSelect>
export class MultiSelectDemo {
cities: City[];
selectedCities: City[];
constructor() {
this.cities = [
{name: 'New York', code: 'NY', inactive: false},
{name: 'Rome', code: 'RM', inactive: true},
{name: 'London', code: 'LDN', inactive: false},
{name: 'Istanbul', code: 'IST', inactive: true},
{name: 'Paris', code: 'PRS', inactive: false}
];
}
}
Particular options can be prevented from selection using the optionDisabled property.
I'm a intern, and I need some help.
I've a ngx-datatable, and I want to display row when condition are met. How can I do it? For example, if country covered is America, I display, if not, I didn't.
<ngx-datatable class="table-zenmoov" [columnMode]="'force'" [rows]="rows" [rowHeight]="'auto'"
[headerHeight]="'auto'" [footerHeight]="'auto'" [externalPaging]="true" [count]="paginationInfo.totalElements"
[loadingIndicator]="loadingIndicator"
[offset]="paginationInfo.currentPage" [limit]="paginationInfo.pageSize" (page)="setTablePage($event)"
(sort)="onSort($event)">
<ngx-datatable-column name="Name" [prop]="'first_name'" [sortable]="true">
<ng-template let-row="row" ngx-datatable-cell-template>
<div class="user-wrap">
<div class="zenmoov-vendor" [style.background]="row.company_id?'#f0ad4e':'#5bc0de'"></div>
<div class="img-circle img-wrapper vendor-avatar">
<img *ngIf="row.avatar_url" [src]="row?.avatar_url " alt="logo">
</div>
<ng-container *ngIf="auth.userRID=='admin'">
<a [routerLink]="['../../vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
</ng-container>
<ng-container *ngIf="auth.userRID=='hr'">
<a [routerLink]="['../../../vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
</ng-container>
<ng-container *ngIf="auth.userRID=='talent'">
<a [routerLink]="['/talent/vendor/',row._id]">{{ row?.first_name }} {{ row?.last_name }}</a>
</ng-container>
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Company" [sortable]="false">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.company_name }}
</ng-template>
</ngx-datatable-column>
</ngx-datable class>
You can use *ngIf on html element and it will be displayed only if the conditions are met.
I have never used ngx-datatable however, from a quick look into the documentation and your code I think I got it. I suppose that this bit [rows]="rows" is where you feed your data to the datatable, what you need to do is filter out the objects you don't want to be in the datatable, something like this in your TypeScript file:
TypeScript File
// Array of strings that contains all countries in America
const americaCountries = [...];
// Iterate over each row and verify if the country of that row is in the array americaCountries
// If it is, that row is added to a new array named americaRows
this.americaRows = this.rows.filter(row => americaCountries.includes(row.country));
HTML File
[rows]="americaRows"
Bear in mind that this is pseudo code because I don't know your TypeScript code and the rows object structure.
Is there any way in which I can expand a particular mat-expansion-panel by clicking an external button?
I have tried linking to the ID of the panel, but with no success...
<mat-expansion-panel id="panel1"> ... </>
...
<button (click)="document.getElementById('panel1').toggle()>Click me</button>
Here is my stackblitz code for example
My eventual plan is to use this method to open different panels within a list generated from an array: <mat-expansion-panel *ngFor="let d of data"> ...
In your html file:
<mat-expansion-panel [expanded]="panelOpenState">
<mat-expansion-panel-header>
<mat-panel-title>
TITLE
</mat-panel-title>
</mat-expansion-panel-header>
<p>BODY</p>
</mat-expansion-panel>
<button mat-raised-button (click)="togglePanel">TOGGLE</button>
In your TS file:
panelOpenState: boolean = false;
togglePanel() {
this.panelOpenState = !this.panelOpenState
}
If you use *ngFor to generate the expansion panels:
<mat-expansion-panel [expanded]="isOpen" *ngFor="let d of data">
<mat-expansion-panel-header>
{{ d.header }}
</mat-expansion-panel-header>
<p>{{ d.content }}</p>
</mat-expansion-panel>
<button mat-raised-button (click)="togglePanel">TOGGLE</button>
If you press the button all of the expanded panels opens
simultaneously.
To open only one panel with one button, add a "expanded" property to the data array for each element like this:
data = [
{id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false},
{id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false},
{id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false},
{id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false},
]
Then in your template:
<mat-expansion-panel [(ngModel)]="d.expanded"
[expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl>
<mat-expansion-panel-header>
<button (click)="toggle(d.expanded)">TOGGLE</button>
{{ d.header }}
</mat-expansion-panel-header>
<p>{{ d.content }}</p>
</mat-expansion-panel>
And the method raised by the button click:
toggle(expanded) {
expanded = !expanded;
}
<mat-expansion-panel [disabled]="true"
#mep="matExpansionPanel"
*ngFor="let foo of list">
<mat-expansion-panel-header>
<button (click)="mep.expanded = !mep.expanded">Toggle</button>
</mat-expansion-panel-header>
<p>Text</p>
</mat-expansion-panel>
Use two-way binding on the expanded attribute of mat-expansion-panel. Here is an example live in StackBlitz:
https://stackblitz.com/edit/angular-gtsqg8
<button (click)='xpandStatus=xpandStatus?false:true'>Toggle it</button>
<p>
<mat-expansion-panel [(expanded)]="xpandStatus">
<mat-expansion-panel-header>
<mat-panel-title>This an expansion panel</mat-panel-title>
<mat-panel-description>xpandStatus is {{xpandStatus}}</mat-panel-description>
</mat-expansion-panel-header>
Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status.
</mat-expansion-panel>
</p>
You can use the method toggle().
First give the element an id.
<mat-expansion-panel #matExpansionPanel>
Next, access the element from javascript. Import necessary libraries (MatExpansionPanel, ViewChild)
#ViewChild(MatExpansionPanel, {static: true}) matExpansionPanelElement: MatExpansionPanel;
Lastly, call the toggle function
this.matExpansionPanelElement.toggle(); //open(), close()
<mat-nav-list>
<mat-expansion-panel *ngFor="let row of rows" #mep="matExpansionPanel">
<mat-expansion-panel-header>
{{row}}
</mat-expansion-panel-header>
<h2>Test</h2>
<button (click)="mep.toggle()">Toggle</button>
</mat-expansion-panel>
</mat-nav-list>
Working Example:
https://stackblitz.com/edit/mat-expansion-panel-vymjsq?file=app%2Fexpansion-overview-example.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<mat-accordion displayMode="flat" multi class="mat-table">
<section matSort class="mat-elevation-z8 mat-header-row">
<span class="mat-header-cell" mat-sort-header="vesselName"></span>
<span class="mat-header-cell" mat-sort-header="vesselName">d</span>
</section>
<mat-expansion-panel [disabled]="true" #mep="matExpansionPanel"
*ngFor="let d of data">
<mat-expansion-panel-header>
<span class="mat-cell" (click)="mep.expanded = !mep.expanded">
<mat-icon class="icon" *ngIf="!mep.expanded">expand_more</mat-icon>
<mat-icon class="icon" *ngIf="mep.expanded">expand_less</mat-icon>
</span>
<span (click)="dClicked(d)" class="mat-cell">{{d.dataSet}}</span>
</mat-expansion-panel-header>
<div><pre>{{d | json}}</pre></div>
</mat-expansion-panel>
<div class="well" *ngIf="!d || d.length == 0">
<p>There are no d for this.</p>
</div>
</mat-accordion>
html:
<mat-accordion >
<mat-expansion-panel #first="matExpansionPanel">
<mat-expansion-panel-header>
<mat-panel-title>...</mat-panel-title>
</mat-expansion-panel-header>
...
</mat-expansion-panel>
<mat-expansion-panel #second="matExpansionPanel" expanded="true">
<mat-expansion-panel-header>
<mat-panel-title>...</mat-panel-title>
</mat-expansion-panel-header>
...
</mat-expansion-panel>
</mat-accordion>
<button (click)="doSomething(first, second)">Click</button>
ts:
import { Component } from '#angular/core';
import { MatExpansionPanel } from '#angular/material';
#Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent {
doSomething(first: MatExpansionPanel, second: MatExpansionPanel) {
if (first.expanded ) { // check if first panel is expanded
first.close(); // close first panel
second.open(); // open second panel
// ...
}
}
}
Read more