I have some category elements on my shop page ( img). My problem is that when I am on "All" tab is present active class. Route is (ex: localhost:4200/category/store) but when I click to load more button on this page for adding more content on this site my route changes like this ( ex: localhost:4200/category/store?page=2) and from this "All" tab disappear active class
<div class="box-margin" *ngIf="subCategories.length >= 1">
<a class="subCategory-card" [ngClass]="subCategories.length > 5 ? 'subCategory-card-width' : ''" [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact: true}"
[routerLink]="['/category', category.slug] | localize">
<div class="subCategory-title">All</div>
</a>
</div>
Related
I'm fairly new to Angular and need to solve what seems to be a simple problem: show an alert or confirmation message on navigating between tabs in angular bootstrap. the issue is when moving to another tab, the tab will open first and then show an alert message if clicked on cancel it will back to the previous tab, what I want simply is to not leave the current tab until click on confirmation to leave.
<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
<li ngbNavItem="docs">
<a ngbNavLink (click)="navigateTab('docs')">
<span [data-feather]="'file-text'"></span>Documents</a>
<ng-template ngbNavContent>
<p>
any content
</p>
</ng-template>
</li>
<li ngbNavItem="external">
<a ngbNavLink (click)="navigateTab('external')">
<span [data-feather]="'chrome'"></span> External
Resource</a>
<ng-template ngbNavContent>
<p>
any external link
</p>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navWithIcons" class="mt-2"></div>
TS:
navigateTab(navTab: string) {
if (navTab != this.currentTab) {
if (this.isInputUpdated) {//if there is an update on the current tab inputs then
this.confirmationMessage(true, this.currentTab);
this.isInputUpdated = false;
}
this.currentTab = navTab;
}
}
You can listen to navChange event on the ngbNav element and stop the event from propagating
<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (navChange)="navChanged($event)">
...
</ul>
navChanged(event) {
event.preventDefault()
}
Inside the confirmationMessage method, if clicked on confirm set active tab with the value of currentTab
I have a list and my last column should be like apples "more options icon", so that a dropdown pops up with additional options.
<tr *ngFor="let foo of bars">
<td>{{foo.id}}</td>
<td>{{foo.name}}</td>
<td class="more-options-menu">
<i class="icon i-menu" (click)="toggleOptionsMenu()"></i>
<div id="more-options-{{foo.id}}" [className]="!toggleOptions ? 'more-options-menu-content' : 'more-options-menu-content show-menu'">
Link 1
Link 2
Link 3
</div>
</td>
</tr>
The problem i am having is, that if i click one of the items in the list, the css class "show-menu" is added to all of the listitems, so that the menu is shown on all items and not just the one I clicked. How can I add the class only to the selected item?
I tried using the id "more-options-xx", but I also cant figure out how.
I would suggest that you keep track of the selected id as a separate property on your component. For example:
selectedId = null;
toggleOptionsMenu(id) {
this.selectedId = id;
}
In your template:
<i class="icon i-menu" (click)="toggleOptionsMenu(foo.id)"></i>
<div id="more-options-{{foo.id}}" class="more-options-menu-content"
[class.show-more]="foo.id === selectedId">
when I hide the popover and open it up again, the value of currentPage hasn't been changed.
HTML CODE:
<el-popover
placement="bottom"
trigger="click"
title="网段详情"
#hide="popoverHide">
<el-table :data="inner_table_data.slice((insidePage-1)*5,insidePage*5)" stripe height="100%">
<el-table-column></el-table-column>
</el-table>
<el-pagination
#current-change="insideChange"
:page-size="5"
layout="prev, pager, next"
:total="30">
</el-pagination>
<a href="javascript:;" slot="reference">
<span v-html="scope.row.subnet"></span>
</a>
</el-popover>
JS CODE:
popoverHide: function () {
this.insidePage = 1;
this.inner_table_data = '';
}
demo link is here: https://jsfiddle.net/npfL4e7h/10/
Change page number in pagination, hide it and open it up again, the data is the first page's data while page number is the number before hiding the popover. Adding a :current-page doesn't seem to help.
You need to add current-page property to the pagination.
<el-pagination
#current-change="insideChange"
:page-size="5"
layout="prev, pager, next"
:total="30"
:current-page="insidePage"
>
I have this:
<a class="button" ng-click="$parent.Filter = ''"
ng-class="{ 'active': Filter === '' }"> Test link </a>
And the next item:
<a class="button" ng-click="$parent.Filter = 'SomeChoice'"
ng-class="{ 'active': Filter === 'SomeChoice' }"> </a>
So, as you can see... these are filters.
What I want to achieve? When I get in the controller where this HTML is, I want the first link to have the ACTIVE class by default..
And, after I click on the second link, I want that active class to be removed from the first and added to the second one...
My question: how do I achieve this in Angular?
Plunkr: https://plnkr.co/edit/n9faIH2YZzIj8vOncfLP?p=preview
PS: the classes and filters I use, have to remain the same.
<div ng-init="active = 1">
<a ng-click="active = 1" ng-class="{'active': active === 1}">1</a>
<a ng-click="active = 2" ng-class="{'active': active === 2}">2</a>
<a ng-click="active = 3" ng-class="{'active': active === 3}">3</a>
</div>
Working plnkr: https://plnkr.co/edit/wnRynCG0IcKLJcVk4xMw?p=preview
OK, what I need may sounds rather complex, but here it is...
Let's say we have the HTML code below (it's still just an example, but it's still quite accurate) :
<div data-role="content" comp-id="jqm-content-6207" id="jqm-content-6207" class="" data-theme="" >
<!-- New Navigation Bar #1 -->
<div data-role="navbar" data-position="fixed" comp-id="jqm-navbar-4603" id="jqm-navbar-4603" class="" data-iconpos="top" >
<ul>
<!-- New Navigation Bar Item #1 -->
<li>
<a href="#" comp-id="jqm-navbar-item-6671" id="jqm-navbar-item-6671" class="" data-icon="home" data-theme="" >
One
</a>
</li>
<!-- / New Navigation Bar Item #1 -->
<!-- New Navigation Bar Item #2 -->
<li>
<a href="#" comp-id="jqm-navbar-item-4404" id="jqm-navbar-item-4404" class="" data-icon="gear" data-theme="" >
Two
</a>
</li>
<!-- / New Navigation Bar Item #2 -->
</ul>
</div>
<!-- / New Navigation Bar #1 -->
<!-- New Navigation Bar #2 -->
<div data-role="navbar" data-position="fixed" comp-id="jqm-navbar-4658" id="jqm-navbar-4658" class="" data-iconpos="top" >
<ul>
<!-- New Navigation Bar Item #2.1 -->
<li>
<a href="#" comp-id="jqm-navbar-item-5321" id="jqm-navbar-item-5321" class="" data-icon="home" data-theme="" >
One
</a>
</li>
<!-- / New Navigation Bar Item #2.1 -->
<!-- New Navigation Bar Item #2.2 -->
<li>
<a href="#" comp-id="jqm-navbar-item-2843" id="jqm-navbar-item-2843" class="" data-icon="gear" data-theme="" >
Two
</a>
</li>
<!-- / New Navigation Bar Item #2.2 -->
</ul>
</div>
</div>
First-off, the core idea is : when the user clicks an item with the comp-id attribute set, then add class msp-selected just to this specific element (and remove it from all other elements).
This is how I'm handling this specific part :
function removeAll()
{
$("*").each(function() {
if ($(this)!==undefined) {
$(this).removeClass("msp-selected");
}
});
}
$(document).ready( function() {
$('[comp-id]').bind('click', function(event) {
removeAll();
$(event.target).addClass('msp-selected');
});
});
So, as you may already have guessed it's like a way of "selecting" item (by clicking on them) from the HTML document.
Now, here's the catch :
How could I make it so that the "selection" is progressive?
What I mean...
When the user first clicks on the Navigation Bar :
Check if the first div with comp-id is selected (has the class msp-selected). If not, select it.
If the first div is already selected, then go one level deeper looking for comp-id, and select that one.
So, any ideas?
How would you do it?
P.S. When one clicks on the <a> of a navigation item, what specific item receives the event?
Is it the <div data-role=\"navbar\"> or the navigation bar item? No matter what, from all these items, I want to select the outermost - not being currently selected. Next time, when the user clicks again and e.g. the navigation bar is selected, then unselect it and select it's child (go deeper).
EDIT :
When trying :
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
$(this).addClass('msp-selected');
});
});
What I'm getting when clicking on navbar-item is :
Selected Div : jqm-navbar-item-8421
Selected Div : jqm-navbar-8598
Selected Div : jqm-content-2860
Selected Div : jqm-page-3363
So, basically it just "selects" the outermost container. Which is wrong... Next time the user clicks, the content should selected - then the navbar and then the navbar-item....
You may write a function like that (i am not sure if the syntax is correct)
function onclick(sender)
{
if(type of sender == null )
{
return;
}
if(sender.className=="selected")
{
onclick(sender.childElement[0]);
// OR If you need all children to be selected,
// for( var i =0; i<sender.childElement.count; i++)
// onclick(sender.childElement[i]);
}
else
{
sender.className="selected";
}
}