mat-tab

Nested Angular material tabs

由 妖精的绣舞 提交于 2021-01-07 01:35:31
问题 I have a requirement for adding dynamic tabs to some User Preferences screen. The main preference tab can be a static tab with static content, but the second tab should have nested mat-tab elements. These additional dynamic preferences come from the backend, which then allows me to use an *ngFor to render the extra tabs. Problem I'm seeing now is with the tab labels . The label text is taking its value from the first nested tab, and NOT from the label property I'm setting. Please see my

Add triangle at bottom of material design tab mat-ink-bar

由 。_饼干妹妹 提交于 2021-01-05 10:47:37
问题 I want to change the style of the mat-ink-bar for Angular material tab. I wanted to archieve a design like this: Jsfiddle example The problem is that the mat-ink-bar already absolute positioned and i cannot display my ::after element. Is there a way how i can archieve this ? Here is what i tried on stackblitz: Mat tab on stackblitz my style are located inside the style.css . The triangle at the bottom is hidden if you use the dev tool. I could not show it using z-index .. Any help would be

Is it possible to disable mat-tab animations with pure css

由 耗尽温柔 提交于 2019-12-24 18:41:11
问题 I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is possible to use the [@.disabled] attribute but I wonder if it is possible to achieve the same effect with pure css. EDIT: Our UX team wants to remove the slide animation from the material tabs since they think they are not appropriate for whatever reason. We have multiple projects that may use multiple times the tabs component, so we wanted a way to remove this

Mat-tab material angular6 selectedIndex doesn't work with *ngFor

由 亡梦爱人 提交于 2019-12-08 19:20:39
问题 I display several tabs with a loop ngFor using Angular Material tabs. This works properly however now I would like to open the second tab when initialised and not the first tab. Therefore, I add the property selectedIndex in the mat-tab-group but it doesn't work and still continues to open on the first tab. HTML <mat-tab-group class="col-10 offset-1" (selectedTabChange)="onTabChanged($event)" [selectedIndex]="1"> <mat-tab label={{tab.name}} *ngFor="let tab of tabs; let index = index"> <div>

How to conditionally prevent user from navigating to other tab in mat-tab-group

由 非 Y 不嫁゛ 提交于 2019-12-05 02:18:14
问题 I have an angular component which uses an angular material tab group. <mat-tab-group> <mat-tab label="First"> <app-comp1></app-comp1> </mat-tab> <mat-tab label="Second"> <app-comp2></app-comp2> </mat-tab> <mat-tab label="Third"> <app-comp3></app-comp3> </mat-tab> </mat-tab-group> In a certain tab, user can do some changes and save. If user did some changes and tries to navigate to another tab without saving, I want to ask the user for confirmation to discard changes before navigating to the

How to conditionally prevent user from navigating to other tab in mat-tab-group

由 大城市里の小女人 提交于 2019-12-03 20:17:05
I have an angular component which uses an angular material tab group. <mat-tab-group> <mat-tab label="First"> <app-comp1></app-comp1> </mat-tab> <mat-tab label="Second"> <app-comp2></app-comp2> </mat-tab> <mat-tab label="Third"> <app-comp3></app-comp3> </mat-tab> </mat-tab-group> In a certain tab, user can do some changes and save. If user did some changes and tries to navigate to another tab without saving, I want to ask the user for confirmation to discard changes before navigating to the other tab. Is there any way to do this? If there is no solution today then i can offer you some trick
订阅 mat-tab