I am using angular material tab library to display vertical and horizontal tabs. There are 3 horizontal tabs and in 2nd horizontal tab, there are vertical tabs. When I put Next button it should go to next horizontal tab. It's working with 1st horizontal tab but in 2nd horizontal tab Next button is not appearing.
Here is: stackblitz - ngular-material-tabs-inside-tab
in tab-group-basic-example.html in 2nd horizontal tab, I put Next button:
<div class="m-10">
<button (click)="nextTab(2)">Next</button>
</div>
in ts file:
nextTab(index: number): void {
this.selectedIndex = index;
}
Looks like the issue is that you want do display something outside of mat-tab. Moving the next button inside it does the trick:
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
<div class="m-10" #appenHere></div>
Contents for {{tab}} tab <br> <br>
<button (click)="addNewComponent()">
Append to {{tab}}
</button>
<div class="m-10">
<button (click)="nextTab(2)">Next</button>
</div>
</mat-tab>
Related
i am using syncfusion pager, dropdownlist in our application
please open the below link.
https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2Fapp.component.html
data will change based on the number of items selected from dropdown.
after selecting the 20 items from drop down go to bottom of the page by scrolling.
drop down list is showing bottom of the drop down box. but i want to show dropdown list items always top of the dropdown box.
Please provide any solution.
i just saw your code on your link, and i tried this:
<div class="container-fluid">
<div class="card" *ngFor="let student of tempArray">
<div class='card-body'>
<p class="text-truncate">{{student.name}} {{student.standard}}</p>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class='card'>
<div class='card-body'>
<div class="fixed-footer" *ngIf="students.length > paginationData[0].value">
<ejs-pager [pageCount]="3" [pageSize]="value" (click)="selectedPage($event)"
[totalRecordsCount]='students.length'></ejs-pager>
<ejs-dropdownlist [dataSource]="paginationData" [fields]="fields" (change)="valueChange($event)" [popupHeight]=150 [value]="value"></ejs-dropdownlist>
</div></div>
</div>
</div>
what i did here is that i put the list items and the drop down box on a separate card.
it's a little messy, just please arrange the indentions.
In the dropdownlist open event, you can get the popupHight and set a negative value into popup offsetY property, refer to below code.
onddlPopupOpen(event: PopupEventArgs, ddlObj) {
event.popup.offsetY = -(parseInt(ddlObj.popupHeight));
event.popup.collision = { X: 'fit', Y: 'fit' };
event.popup.dataBind();
event.popup.refreshPosition(ddlObj.element, false);
}
This will open the popup in the top.
Sample
I have a Material Tab component in Angular 2.
I want to have a button at the end of the tabs, that acts as a add tab button. Upon clicking on it a new tab is created before it.
I tried putting a button there, but couldn't find how to place it exactly next to the last tab.
So what I did is I added a tab that acts like a button. When this tab is clicked, a new tab is created.
However, when this tab is clicked, it gains focus. While I can change which tab is selected, the tab still has the focused UI (it is colored).
How can I make it lose it's focus completely?
P.S. If there is a way to add a regular button next to the last tab, without making it a tab, this would also be good.
Edit - Code:
This is how my tabs are setup:
<mat-tab-group (selectedTabChange)="selectedTab($event)">
<mat-tab>
<ng-template mat-tab-label>
Basic Details
</ng-template>
</mat-tab>
<mat-tab #categoryTab *ngFor="let table of mCase.Tables; let tableIndex = index" [attr.data-index]="tableIndex">
<mat-tab>
<mat-tab #addCategory>
<ng-template mat-tab-label>
<div color="white" class="center">Add category</div>
</ng-template>
</mat-tab>
</mat-tab-group>
Code behind:
public selectedTab(e) {
if (e.index == 1 + this.mCase.Tables.length) {
//Add new category
this.CreateTable();
this.selectedIndex = this.mCase.Tables.length;
}
Promise.resolve().then(() => this.selectedIndex = e.index);
}
You could try add the button like this:
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
Basic Details
</ng-template>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="foo()">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
Working example: https://stackblitz.com/edit/angular-zrklwg
By the way, if you are bothered by the button having disabled like styles, you can just override that with some custom CSS! :D
You can use .blur() on the event.currentTarget of the button which has been clicked. .blur() is the opposite of the .focus() method and will remove focus from an element.
In you question you said:
Upon clicking on it a new tab is created before it.
You didn't add any html, so I just went and created an example of how you can dynamically append buttons to the html via a data bound array.
this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
To learn about how this works, see this answer.
This is the crux of the component code that you can use to blur focus on the element.
addButton(clickedButtonIndex, event){
this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
event.currentTarget.blur();
}
Working Example: https://stackblitz.com/edit/angular-vslscm
In the example, I have set a red background in css to be applied to buttons when they are focused. You can see that when you click on a button, it momentarily will turn red before being toggled off again. Clicking the buttons will add a new button before the button which was clicked.
I'm facing a strange error in my Angular 4 HTML Template, I'm trying to toggle the class of <i> tag, but only one class shows up, but not the other. Here is my code;
<i [ngClass]="{'fa fa-eye': visible, 'fa fa-eye-slash': !visible}" aria-hidden="true" (click) = "toggle(pass)"></i>
TS:
visible = false;
toggle(event){
this.visible = !this.visible;
}
When i check my app, the first icon shows up i.e. the default on fa fa-eye-slash but when i click on it it shows only box.
Edit:
Tried with different icons from FA, but nothing shows up.
You need to change the html to:
<i class="fa" [ngClass]="{'fa-eye': visible, 'fa-eye-slash': !visible}" aria-hidden="true" (click) = "toggle(pass)"></i>
I am using an icon in the footer using fragmentation. On press of the icon, it opens a popover. I want the popover above the footer but it is opening below it and no content is visible.
sapui5 <xml>
<footer>
<OverflowToolbar id="otbFooter">
<ToolbarSpacer/>
<OverflowToolbarButton text="Add" icon="sap-icon://add" press="popover" class="popover"/>
</OverflowToolbar>
</footer>
Set placement property of sap.m.Popover to Top.
<Popover title="{Name}" placement="Top">
I have an anglarJS project that has a horizontal navigation bar. Each element in the navigation bar is a category and uses an angularJS dropdown directive to show the subcategories for that category.
I would like the drop down to fill the whole screen from left to right. Currently the drop down determines it's width from the css "min-width" property. This does not solve my desire for the drop down menu to fill the whole screen I have seen some websites do this, and was wondering if there is a way to force my dropdown to fill the whole screen from left to right.
Here is the html for the page/drop down including the css that specifies the dropdown width.
Here is a picture of the dropdown again. I added blue arrows to indicate what I mean when I want the drop down to fill the whole screen.
The pictures are pretty high resolution and show you all the details. The page is rather complex to try and replicated in a plunker.
The whole thing needs to be responsive as well, and is based off of Bootstrap 3 and AngularJS Bootstrap.
Thanks for any help you can give!
David
I found a solution for the problem.
I created a button group that floats left that is on the same row as the button group in the center. The button group that floats left only contains one button, and that button has it's visibility set to hidden.
You have the dropdown attached to this button, rather than the ones in the center, since the dropdown won't start any farther left than the beginning of the button it is attached to.
<div class="pull-left">
<div class="btn-group" dropdown is-open="isOpen">
<button type="button" style="visibility: hidden" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" dropdown-toggle ng-disabled="disabled">
<span class="caret"></span>
</button>
<div class="dropdown-menu top-level-category-drop-down-standard" ng-style="{{windowWidth}}" ng-click="$event.stopPropagation()" >
<div ng-click="$event.stopPropagation()" ng-mouseleave="close()" ng-mouseenter="keepOpen()">
<div ng-if="currentCategory != undefined">
<horizontal-menu-inner close-drop-down-menu=$parent.closeDropDownMenu top-level-category=$parent.currentCategory></horizontal-menu-inner>
</div>
</div>
</div>
</div>
</div>
And for the centered button group that contains your categories you want to trigger the dropdown you pass the 'ioOpen' variable into the centered button directive as an attribute.
<div class="text-center">
<div class="btn-group">
<div class="horizontal-top-level-category" ng-repeat="topLevelCategory in categoryNavigationGraph">
<horizontal-top-level-category is-open=$parent.isOpen current-category-id=$parent.currentCategoryId top-level-category=topLevelCategory></horizontal-top-level-category>
</div>
</div>
</div>
You then have that directive set up to close or open the drop down depending on whether the mouse enters or leaves the button in that directive
<button ng-mousemove="activeMenuItemm()" ng-mouseleave="close($event)" ng-mouseenter="open()" type="button" ng-class="{'filter-criteria-variety-category-name-hover': filterCriteriaCategoryActive}" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" ng-disabled="disabled">
{{topLevelCategory.text}}
The tricky part is not having the dropdown close when you hover down from the centered button onto the dropdown
I did this by figuring out if the mouse was leaving from "down", which should not close the dropdown, or other, which should from the last position, which was calculated In the centered button directive link function:
link: function (scope, element) {
init();
scopeLevelFunctions();
function init(){
calculateBoundry();
}
function scopeLevelFunctions(){
scope.calculateElementBoundry = function(){
calculateBoundry();
}
}
function calculateBoundry(){
var boundry = element[0].getBoundingClientRect();
scope.boundry = boundry;
scope.topBoundry = boundry.top;
scope.bottomBoundry = boundry.bottom;
scope.leftBoundry = boundry.left;
scope.rightBoundry = boundry.right;
}
},
The open function triggered by mouseenter sets the boundry, which the close calculates from that value to see if this is a mouseleave that is leaving down
$scope.open = function(){
$scope.calculateElementBoundry();
$scope.currentCategoryId = $scope.topLevelCategory.categoryId;
$scope.filterCriteriaCategoryActive = true;
$scope.timeoutPromise = $timeout(function() {
$scope.isOpen = true;
}, 150);
};
$scope.close = function($event){
$scope.lastPosition = {
x : $event.clientX,
y : $event.clientY
};
var deltaX = $scope.lastPosition.x - $event.clientX,
deltaY = $scope.lastPosition.y - $event.clientY;
if($event.clientY >= ($scope.bottomBoundry - 8))
$scope.direction = "bottom";
else
$scope.direction = "other";
if($scope.direction != "bottom"){
if($scope.timeoutPromise != undefined)
$timeout.cancel(this.timeoutPromise);
$scope.isOpen = false;
$scope.filterCriteriaCategoryActive = false;
}
else{
if($scope.isOpen == false && $scope.timeoutPromise != undefined){
$timeout.cancel(this.timeoutPromise);
$scope.filterCriteriaCategoryActive = false;
}
}
I put the timeout in there so that if the user is just scrolling to bottom of the screen the drop down does not just appear. I cancel the timeout if they mouseleave and the drop down is not open.
The dropdown gets different data in it because the centered category directive has an attribute "categoryId" that is shared with the directive that the dropdown is located in. As that categoryId is changed that directive determines what that new categories submenu should be and feeds that into the dropdown.
I know how wide the dropdown should be because in the directive that contains the dropdown/invisible button I calculated the window width:
var width = $window.innerWidth;
$scope.windowWidth = "{'min-width':" + width + "}";
and on the dropdown I use ng-style to set this width
ng-style="{{windowWidth}}"