i have issue with active class in tablist/listgroup of angular. when i click any items it becomes active,but active class is not being removed from old tab. Please help me out
<div class="list-group" id="list-tab" role="tablist">
<span *ngFor="let itm of serviceitms;let i = index">
<a *ngIf="i == 0" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
href="#list-home" role="tab" aria-controls="itm.name">{{itm.name}}</a>
<a *ngIf="i != 0" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
href="#list-home" role="tab" aria-controls="itm.name">{{itm.name}}</a>
</span>
</div>
Seems like you are using angular with bootstrap directly. Use ng-bootstrap or ngx-bootstrap angular should not be directly used with bootstrap. That is a very bad practice.
ng-bootstrap option:
https://ng-bootstrap.github.io/#/components/nav/overview
ngx-bootstrap option (combine groups with accordion):
https://valor-software.com/ngx-bootstrap/#/buttons
https://valor-software.com/ngx-bootstrap/#/accordion
i think you should change the id and href for every item.
also you should do this for tab content divs.
<div class="list-group" id="list-tab" role="tablist">
<span *ngFor="let itm of serviceitms;let i = index">
<a [class.active]="i == 0" class="list-group-item list-group-item-action" id="list-home-list{{ i }}" data-toggle="list"
href="#list-home{{ i }}" role="tab" aria-controls="itm.name">{{itm.name}}</a>
</span>
</div>
Related
HTML code
<div class="card-header">
<h5>Refill by date</h5>
<div class="card-header-right">
<nav class="navbar bg-faded ">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('branch'); getFranchiseRefillsByDateAndBranch()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By branch</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('product'); getFranchiseRefillsByDateAndProduct()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By product</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('list'); getFranchiseRefillsByDateAndList()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> Refill list</i>
</button>
</li>
</ul>
</nav>
</div>
</div>
part of TS code
getFranchiseRefillsByDateAndBranch() {
this.items = [];
var hrchyIds = this.jwtHelperService.getFRefillHrchyIds();
var ym = this.localStorage.retrieve('frym');
if (hrchyIds) {
this.refillService.getFranchiseRefillsByDateAndYear(hrchyIds, ym, "branch", this.page, this.rec).subscribe(val => {
this.items = val;
});
}
}
CSS code
.nav-item.active button i{
color: #3D94CD !important;
}
I am trying to change color of active button using router link active but this method does not work in this case, is their any alternate way of adding class dynamically, based on current click.
routerLinkActive works if there was a routerLink on this element.
Keep currentActiveItem variable in ts file. Set some default value say "branch"
currentActiveItem : string = "branch"
Change value of this variable in setView function.
And additionally also use ngClass as following on correspondiong li elements.
[ngClass]="{'active' : currentActiveItem == 'branch'}"
[ngClass]="{'active' : currentActiveItem == 'product'}"
[ngClass]="{'active' : currentActiveItem == 'list'}"
I'm trying to make tabbed comments section for WordPress. I use jQuery UI tabs to make it work. I have styled radio switches between tags but it does not works. When I click a tab, link click happens and radio button does not change.
my code for first <li> element looks like this:
<li class="active ui-state-default ui-corner-top ui-tabs-active ui-state-active" id="comments-evolved-Facebook-control" role="tab" tabindex="0" aria-controls="comments-evolved-Facebook-tab" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<a href="#comments-evolved-Facebook-tab" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">
<div class="switch switch-Facebook">
<input name="multicomments" id="Facebook-toggle" class="switch-control" type="radio">
<label class="switch-toggle" for="Facebook-toggle">
<div class="switch-handle"><span><i class="icon-multicommentsFacebook"></i></span>
</div>
</label>
</div><span id="comments-evolved-Facebook-label">Label Example</span>
</a>
</li>
see actual WordPress page: Page with comments
Solved! Here is the jQuery code I added.
jQuery('#".$tab."').click(function() {
jQuery('#".$tab."-toggle').prop('checked', true);
});
`".$tab."` is the `<li>` element ID
I have a play template where I loop through a list of objects that have nested lists, and I'm displaying the items iteratively using nested for loops.
-skillList is a List[Skill]
-Skill is an object defined in a model
-skillObject.getChildrenList() return a list[Skill]
What I would like to do is be able to display this but using some type of recursion so that if the level of nesting of mylist changes I don't have to change the whole template. So is there any way to do this in a recursive way ?
<div class="custom-dd dd dd-nodrag" id="nestable_list_1">
<ol class="dd-list">
#for(skill <- skillList) {
<li class="dd-item">
<div class="dd-handle dd-nodrag row">
<span class="dd-nodrag" id="content_#skill.getCleanUri()"> #skill.getLabel() </span>
</div>
<ol class="dd-list">
#for((child, indexChild) <- skill.getChildrenList().zipWithIndex) {
<li class="dd-item" data-id="#indexChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#child.getCleanUri()"> #child.getLabel() </span>
</div>
<ol class="dd-list">
#for((grandChild, indexGrandChild) <- child.getChildrenList().zipWithIndex) {
<li class="dd-item" data-id="#indexGrandChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#grandChild.getCleanUri()"> #grandChild.getLabel() </span>
</div>
</li>
}
<div class="text-left addNew" id="meta-#index">
<span>
<button class="btn btn-icon w-xs plusBtn
btn-primary waves-effect waves-light toggleButton" data-toggle="modal"
data-target="#custom-width-modal"> <i class="fa fa-plus" aria-hidden="true"></i>
</button>
</span>
</div>
#(index = index + 1)
</ol>
</li>
}
</ol>
</li>
}
</ol>
Thanks in advance for any answer.
You can create a separate template that takes List[Skill] as argument and renders SkillObjects in provided list and children of these SkillObjects. Then use that template at first nested level in your main page template. Like following -
SkillTemplate.scala.html
#(skills: List[Skill])()
<ol class="dd-list">
#for((child, indexChild) <- skills.zipWithIndex) {
<li class="dd-item" data-id="#indexChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#child.getCleanUri()"> #child.getLabel() </span>
</div>
#SkillTemplate(child.getChildrenList())
<div class="text-left addNew" id="meta-#index">
<span>
<button class="btn btn-icon w-xs plusBtn
btn-primary waves-effect waves-light toggleButton" data-toggle="modal"
data-target="#custom-width-modal"> <i class="fa fa-plus" aria-hidden="true"></i>
</button>
</span>
</div>
#(index = index + 1)
</li>
}
</ol>
I have not been able to test it
This is what I have:
home.html
<li *ngFor="let item of myList">
<div *ngIf="item.messageText === {{myVar}}" class="bordered">{{item.messageText}}</div>
<div *ngIf="item.messageText !== {{myVar}}" class="greyedOut">{{item.messageText}}</div>
</li>
in home.ts I have defined the variable myVar and I've assigned to it a value.
I want to assign bordered class to the element of myList which has a value equal to myVar and assign another class if that element's value is different.
*ngIf would work if you change {{myVar}} to myVar(without interpolation) in expression.
<li *ngFor="let item of myList">
<div *ngIf="item.messageText === myVar" class="bordered">{{item.messageText}}</div>
<div *ngIf="item.messageText !== myVar" class="greyedOut">{{item.messageText}}</div>
</li>
Though I would prefer you to use ngClass here, more cleaner and better solution.
<li *ngFor="let item of myList">
<div [ngClass]="item.messageText == item.messageText ? 'bordered': 'greyedOut'">
{{item.messageText}}
</div>
</li>
OR
<li *ngFor="let item of myList">
<div [ngClass]="{'bordered': item.messageText == item.messageText, 'greyedOut': item.messageText !== item.messageText }">
{{item.messageText}}
</div>
</li>
To complete Panjak Parkar's answer, and to answer to the question in the title (style)
<li *ngFor="let item of myList">
<div [ngStyle]="{'background-color':item.country === 'UK' ? 'green' : 'red'}">
</div>
</li>
I am creating a side menu using bootstrap accordion collapse and making use of knockout js binding. My problem is in assigning the right HTML element ids for toggle and collapse purposes as required by bootstrap. I have though of using the $indexin knockout to autogenerate the id. But not coming right. See my code below and comments:
<div id="content" style="font-size: 8.8pt">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="news">
<div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()"><!--accordionItems is an observableArray with my accordion objects. Object has a header and a list of linkitems. Each linkItem object has linkText and url-->
<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><!--want to do something like: href="#"+$index-->
<p class="panel-title" data-bind="text: nameHead"></p>
</a> <!--binding a collapse header here.-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><!--want to autogenerate the id here using knockout for reference above-->
<ul class="Newsbar panel-body" data-bind="foreach: list">
<li><a data-bind="attr: { href: url }, text: linkText"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
well i already done something like this before hope this helps
<div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()">
<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne" data-bind="attr:{href:'#collapseOne'+$index() }" >
<p class="panel-title" data-bind="text: nameHead"></p>
</a> <!--binding a collapse header here.-->
<div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" data-bind="attr:{id:'collapseOne'+$index()}">
<ul class="Newsbar panel-body" data-bind="foreach: list">
<li><a data-bind="attr: { href: url }, text: linkText"></a></li>
</ul>
</div>
</div>
Let me explain here :
You just need to create dynamic id and href in oder to work with this stuff .
Well lucky you have one loop over if incase there exists multiple loops use $parentContext.index() and so on .
You just need to use attr to create dynamic id and href using $index() which gives you unique id everytime it loops .