Hi I am having two different table (table within table without any unique id)using p-row expansion. while expanding row it expand all the rows, I need to expand only the selected row. My code look like the below syntax.
<p-table>
<ng-template pTemplate="header">
</ng-template>
<ng-template pTemplate="body">
</ng-template>
<ng-template pTemplate="rowexpansion">
<p-table>
<ng-template pTemplate="header">
</ng-template>
<ng-template pTemplate="body">
</ng-template>
</p-table>
</ng-template>
</p-table>
Related
Say I had an ngFor loop surrounding an ngIf statement
<ng-container *ngFor="let item of items">
<ng-container *ngIf="condition1">
//display table1
</ng-container>
</ng-container>
Now, say I had a second table (call it table2) that I want to display if table1 is not displayed.
<ng-container *ngIf="condition1 was never met and table1 is not displayed">
//display table2
<ng-container>
What is the best way to do this, and is there a way to do this using Angular's data binding features? Or, could you point me in the right direction?
You can use standard Angular ngIf, Else like this 👇
<ng-container
*ngIf="condition1; then table1; else table2">
</ng-container>
<ng-template #table1>
<div>
table1
</div>
</ng-template>
<ng-template #table2>
<div>
table2
</div>
</ng-template>
You can read more about it on this post
You can use the ng-template and ngIf-else
<ng-container *ngFor="let item of items">
<ng-container *ngIf="condition1;else table2">
//display table1
</ng-container>
</ng-container>
<ng-template #table2> //display table2 </ng-template>
or
<ng-container *ngFor="let item of items">
<ng-container *ngIf="condition1;then table1 else table2"> </ng-container>
</ng-container>
<ng-template #table1> //display table1 </ng-template>
<ng-template #table2> //display table2 </ng-template>
In my HTML file, I've duplicated the "elseBlock2". How do I implement directive (ng-template) to handle it?
<div class="col-2">
<ng-container *ngIf="item.isSuccess; else elseBlock2">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress; else elseBlock2">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</div>
Can work something like this?
<div class="col-2">
<ng-container *ngIf="(item.isSuccess || item.progress); else elseBlock2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</ng-container>
<ng-template #elseBlock2>
Your content
</ng-template>
</div>
Update:
If you want to display the elseBlock only when it's both not in progress and success you can do something like this:
<div class="col-2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
<ng-container *ngIf="!item.progress && !item.isSuccess">
Your content
</ng-container>
</div>
You can use if then else with ternary operator to achieve else-if in Angular
<ng-container
*ngIf="item.isSuccess then successBlock; else (item.progress) ? progressBlock : elseBlock"
></ng-container>
<ng-template #successBlock>
{{ getSimplifiedSize(item.file.size) }}
</ng-template>
<ng-template #progressBlock>
{{ item.progress }}%
</ng-template>
<ng-template #elseBlock>
Error
</ng-template>
In else statement, instead of passing a template, do another conditional check with ternary operator and pass other two templates as values
<ngx-datatable-column [width]="24"
[sortable]="true"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
<ng-template let-column="column" ngx-datatable-header-template>
<ng-container>
<div ngbTooltip="Click on the word 'Name' to change the sort direction of the student list">
{{column.name}}
</div>
</ng-container>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div>
{{value}}
</div>
</ng-template>
</ngx-datatable-column>
This is part of my code. I needed to use a ngbTooltip, which works, for the column header, but when I hover the bubble gets cut off by the datatable. How can I prevent it from getting cutoff?
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
<ng-template let-column="column" ngx-datatable-header-template>
<ng-container>
<div container="body" ngbTooltip="Click on the word 'Name' to change the sort
direction of the student list">
{{column.name}}
</div>
</ng-container>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div>
{{value}}
</div>
</ng-template>
</ngx-datatable-column>
By adding container="body" to the div with the tooltip it allowed the tooltip window to pop over the borders of the ngx-datatable.
Side note: in my research I found that for ngbTooltip you can add tooltipClass="className" to customize the tooltip window.
I'm trying to add a new row to the current table so that I can have a row under the list of data that can have a save button and an insert to be done e.g. save phone number. I have added html comments of where the new row will go but not sure how to do it in PrimeNg.
See the code below:
<div class="m_datatable m-datatable m-datatable--default m-datatable--loaded">
<p-dataTable [value]="personPhone.phones"
emptyMessage="{{l('NoData')}}"
paginator="false"
rows="5"
tableStyleClass="m-datatable__table">
<p-column header="{{l('Actions')}}" [style]="{'width':'130px','text-align':'center'}">
<ng-template let-record="rowData" pTemplate="body">
<button (click)="deletePhone(phone, personPhone)" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill">
<i class="fa fa-times"></i>
</button>
</ng-template>
</p-column>
<p-column header="{{l('PhoneType')}}">
<ng-template let-record="rowData" pTemplate="body">
{{getPhoneTypeAsString(record.type)}}
</ng-template>
</p-column>
<p-column header="{{l('PhoneNumber')}}">
<ng-template let-record="rowData" pTemplate="body">
{{record.number}}
</ng-template>
</p-column>
<!--New row to go here-->
</p-dataTable>
</div>
I Just want a row like this:
<tr>
<td>
<button (click)="savePhone()" class="btn btn-sm btn-success">
<i class="fa fa-floppy-o"></i>
</button>
</td>
<td>
<select name="Type" [(ngModel)]="newPhone.type" class="form-control">
<option value="0">{{l("Mobile")}}</option>
<option value="1">{{l("Home")}}</option>
<option value="2">{{l("Business")}}</option>
</select>
</td>
<td><input type="text" name="number" [(ngModel)]="newPhone.number" class="form-control" /></td>
</tr>
First find the length of the data what you are getting like below?
public dataLength:number;
this.myService.getAllResult('query)
.subscribe((response: any[]) => {
this.data = response
this.dataLength = this.data.length;
}
Now in p-template body take another row and use *ngIf and check the dataLength is greater than or equal to current Index:
<ng-template pTemplate="body" let-i="rowIndex" let-data>
<tr>
<td>{{i + 1}}</td>
<td>{{data.name}}</td>
<td>{{data.email}}</td>
</tr>
<tr *ngIf="i >= (dataLength -1)">Print your data</tr>
</ng-template>
I think there should be something like $last and $first index in primeNg as we have in angular for *ngFor.
If we find the last index in Prime Ng. Then no need to take the another dataLength. But Above solution should work for you.
Using the incell editing for the primeng TurboTable, I am trying to execute a method by clicking on enter key. Here is the following code:
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.vin" (keyup.enter)="onKeyPress($event)">
</ng-template>
<ng-template pTemplate="output">
{{rowData.vin}}
</ng-template>
</p-cellEditor>
</td>
The problem is that the method onKeyPress is not executed by clicking on the enterKey. So I've tried with keypress as following:
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.vin" (keypress)="onKeyPress($event)">
</ng-template>
<ng-template pTemplate="output">
{{rowData.vin}}
</ng-template>
</p-cellEditor>
</td>
And what I've noticed is that the method onKeyPress is executed by clicking on any button except the enter Key.
I think onEditComplete event catches the enter key press.
Check https://www.primefaces.org/primeng/#/table under Events.
To call your function on enter key press you can do this:
<p-table ... (onEditComplete)="onEditComplete($event)">
...
<td [pEditableColumn]="rowData" pEditableColumnField="'vin'">
In your component:
onEditComplete(event) {
console.log(event.data);
}
I Tried to use keydown instead of Keyup and it works fine
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.vin"
(keydown.enter)="onKeyDown($event)">
</ng-template>
<ng-template pTemplate="output">
{{rowData.vin}}
</ng-template>
</p-cellEditor>
</td>