Using prime ng data table's column checkbox as,
<p-column [style]="{'width':'38px'}" selectionMode="multiple">
</p-column>
I want to add a tooltip in the header to indicate a value of checkAll/uncheck All.
In stack overflow found that in prime faces we can add a tooltip how to do this in angular?
You could try to add to a template, something like this:
<p-column [style]="{'width':'38px'}" selectionMode="multiple">
<ng-template pTemplate="header">
<span pTooltip="this is a tooltip!" appendTo="target"
style="position: relative">
{{row[col.field]}}
</span>
</ng-template>
</p-column>
Also make sure you imported tooltip in app.module, import {TooltipModule} from 'primeng/tooltip';
Related
Trying to add header in prime ng sidebar component but its not working
<p-sidebar [(visible)]="visibleSidebar1">
<ng-template p-Template="header">
<p>"Header"</p>
</ng-template>
My content goes here
</p-sidebar>
Try using pTemplate="header" instead of p-Template="header"
in shared component i tried this and seems to be working
{{Header}}
<p-sidebar [(visible)]="visibleSidebar1"><app-shared-component></app-shared-component></p-sidebar>
Here it is described how to put a tooltip on a kendo grid cell. However it is only about tooltip containing some information from the anchor element, for example its title attribute. But what is the best way to integrate external information not available at the anchor? In my case I want to have a tooltip displaying the name of the last editor of the grid item when I hover over a particular cell of it. The name is not part of the cell content. It comes additionally from the backend for each grid row. How can I access it for the tooltip?
<kendo-grid [height]="200"
[data]="myModel">
<kendo-grid-column field="one" title="First column" width="90"></kendo-grid-column>
<kendo-grid-column field="two" title="Second column" width="60"></kendo-grid-column>
<kendo-grid-column field="three" title="Third column" width="120"></kendo-grid-column>
</kendo-grid>
OK, I solved it. The solution was to modify the kendo column with ng-template:
<kendo-grid-column title="My titel" width="90">
<ng-template kendoGridCellTemplate let-dataItem>
<span kendoTooltip title="{{dataItem?.tooltipContent}}">
{{dataItem?.cellContent}}
</span>
</ng-template>
</kendo-grid-column>
This way I "smuggle" the external data to the cell HTML element. Then it can be easily accessed with kendo tooltip directive.
I am trying to display data on each and every tab, but the issue is the data I have is relatably large to fit in a single screen.
I am looking for a way to make tabs scrollable so that I can scroll on the data.
Is there any way to add buttons on the edges of the tabs or add a horizontal scrollbar to make it scrollable?
Something like this, which is responsive too.
Thanks
You can solve it through Angular material Tabs. Here, is the documentation of angular.
https://material.angular.io/components/tabs/examples
Remember, you have to import MatTabModule on your angular module, like below:
I have added it on my project and a sample image is like below:
Additionally, if you want to add a button instead of text, you can do it also. Here is a sample image for you:
Here, sample code for this is
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
First
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Second
</ng-template>
Content 2
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Third
</ng-template>
Content 3
</mat-tab>
</mat-tab-group>
You can use any mat-icon class here to change the button icon. You can use this link https://material.io/resources/icons/?style=baseline .
Hopefully, it will solve your problem.
I am facing an issue with multiple nested ngIf applied on ng-template elements in Angular.js, and I can't seem to get the perfect answer. I know workarounds but they are not optimized.
This is the code that I am trying to get running:
<div class="container">
<ng-template *ngIf="booleanA;then caseA else caseB">
<ng-template #caseA>
<el>1</el>
<el>2</el>
</ng-template>
<ng-template #caseB>
<ng-template *ngIf="booleanB">
<el>3</el>
<el>4</el>
<el>5</el>
</ng-template>
</ng-template>
</ng-template>
</div>
And these are the two solutions I have found to my problem:
Placing the ngIf on every child element inside of the #caseB element:
<ng-template #caseB>
<el *ngIf="booleanB">3</el>
<el *ngIf="booleanB">4</el>
<el *ngIf="booleanB">5</el>
</ng-template>
Placing the surrounding class="container" element inside both #caseA and #caseB, and applying the second ngIf to it:
<ng-template *ngIf="booleanA;then caseA else caseB">
<ng-template #caseA>
<div class="container">
<el>1</el>
<el>2</el>
</div>
</ng-template>
<ng-template #caseB>
<div *ngIf="booleanB" class="container">
<el>3</el>
<el>4</el>
<el>5</el>
</div>
</ng-template>
</ng-template>
The issue with these solutions is in the optimization. The first one checks multiple times for the same value, and the second one uses the same HTML element twice.
Is there any way I could make the original design work?
EDIT: The two solutions wouldn't appear as blocks of code, therefore I styled them as inline code. If you know how to fix that you'd be very welcome.
EDIT 2: Bringing some clarification as to what I am looking for: The end goal is not for the code to work, I have already found workarounds that I could use if all else fails.
The end goal is to get this code working only with Angular's logical element <ng-template> and by following the original design; and without the help of additional native elements like div, which would alter the DOM.
Two changes you need to make
Using ng-container
Using div instead of nested ng-template
please see this stackblitz
<div class="container">
<ng-container *ngIf="booleanA; then caseA; else caseB">
</ng-container>
<ng-template #caseA>
<span>1</span>
<span>2</span>
</ng-template>
<ng-template #caseB>
<div *ngIf="booleanB">
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</ng-template>
</div>
You can try to use ngSwitch:
https://angular.io/api/common/NgSwitch
example code from Angular:
<container-element [ngSwitch]="switch_expression">
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<ng-container *ngSwitchCase="match_expression_3">
<!-- use a ng-container to group multiple root nodes -->
<inner-element></inner-element>
<inner-other-element></inner-other-element>
</ng-container>
<some-element *ngSwitchDefault>...</some-element>
</container-element>
I have found a way to keep the mindset of my original design without adding unnecessary new DOM elements, duplicating HTML code, or double-checking the same variable.
<div class="container">
<ng-template *ngIf="booleanA;then caseA else caseB">
<ng-template #caseA>
<el>1</el>
<el>2</el>
</ng-template>
<ng-template #caseB>
<ng-template *ngIf="booleanB;then caseC"></ng-template>
<ng-template #caseC>
<el>3</el>
<el>4</el>
<el>5</el>
</ng-template>
</ng-template>
</ng-template>
</div>
Thanks to everyone for giving me other paths to explore, those will serve me well.
I have a tabView and a list of tab-panels.
Based on runtime conditions, I need to hide and unhide one of the tab panels.
Can not find a way to do this using looking at their docs or here.
Any suggestions?
In general is there a way to dynamically add and remove tab panels?
Code I am using now that is not working, my test syntax must be wrong:
<div [ngSwitch]="isNEC">
<ng-template ngSwitchCase="'true'">
<p-tabView>
<p-tabPanel header="Detail">
<linechart #linechart></linechart>
</p-tabPanel>
<p-tabPanel header="Assessment">
Coming soon to a theater near you !!!!
</p-tabPanel>
</p-tabView>
</ng-template>
<ng-template ngSwitchCase="'false'">
<p-tabView>
<p-tabPanel header="Detail">
<linechart #linechart></linechart>
</p-tabPanel>
</p-tabView>
</ng-template>
</div>
unless I put a switch default, nothing ever shows up.
isNEC is a component public attribute of type string
all is well, I just needed to check for 'true' and not "'true'"