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.
Related
I have used Mat Tab component to show a view of another component (which is currently a raised mat Hello button).. Earlier, there was an issue of tabs not showing full view during when the hello was shown in a tiny scroll along with Content 1.. when I resolved the full view problem using dynamic height, all other content is showing up except the component reference HTML element..
<mat-tab-group dynamicHeight="True">
<mat-tab label="L1">
<div>bda></div>
<app-project-form></app-project-form>
<div>bda></div>
<div>bda></div>
</mat-tab>
<mat-tab label="L2"></mat-tab>
<mat-tab label="L3"></mat-tab>
</mat-tab-group>
What's actually shown:
Expected output should show the Hello button after the first bda>, instead it is ignored.. Please help in resolving this...
I have added angular material to my project and set up an empty component with the html from the tabs example.
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
Every time I click on a tab or even if I add a button the ripple effect shows outside the element off to the side.
Here's a picture of what is happening.
https://imgur.com/a/rSQHFNQ
Edit: Figured it out. I forgot to include the line
#include mat.core();
in my custom theme
I have below code
<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<ng-container *ngFor="let list of lists">
<p-contextMenu [target]="link" [model]="items"> </p-contextMenu>
<p-tabPanel [header]="list.listName" #link>
<app-data-module [List]="list"></app-data-module>
</p-tabPanel>
</ng-container>
on rightclick of tabpanel, it should show the context menu, but its not showing, i dont know what am i missing here? please help
You might be able to use header template (instead of a "header="). Something like this:
<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<p-tabPanel *ngFor="let list of lists">
<ng-template pTemplate="header">
<!-- Here is where all the header content will go, including the context menu -->
<div #link>{{list.name}}</div>
<p-contextMenu [target]="link" [model]="items"</p-contextMenu>
</ng-template>
<!-- Here is where the content of the tab will go -->
<app-data-module [List]="list"></app-data-module>
</p-tabPanel>
</p-tabView>
The main flaw here is, the context menu only appears when right-clicking on the <div>; clicking anywhere else in the tab header still won't work. I've not found a way around that, but hopefully this will help get you in the right direction.
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';
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'"