Dynamically add classes inside *ngFor directive in angular5? - angular5

I have below few classes that has to applied to a div in *ngFor as shown below:
<div class="row">
<ng-container *ngFor="let item of tripTiles">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
...
</div>
</div>
<ng-container>
</div>
I have classes like panel panel-primary, panel panel-green, panel panel-red and panel panel-yellow how can i dynamically assign these classes.
Can i get any help or idea?..


Try to use [ngClass] in div with conditions or variables, like in this answer:
Dynamic classname inside ngClass in angular 2
Example:
<div [ngClass]="[type === 'primary' ? 'panel-primary' : '']">
...
</div>

Related

How to make iterations using v-for directive on nested array (array in array)

I am new to Vue and I came upon a situation that I would like to have some advice on.
In my js file I have some arrays that contain some data that I would like to insert in a table:
const d1=[{col1:"aaa1",col2:"bbb1",col3:"ccc1",col4:"ddd1",col5:"eee1"},
{col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"}]
const d2=[{col1:"fff1",col2:"ggg1",col3:"hhh1",col4:"iii1",col5:"jjj1"},
{col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"}]
then I saved the two arrays in another variable called availableData
const availableData=[d1,d2];
my vue instance as follows:
new Vue({
el: '#c1',
data: {
availableData,
}
});
In my HTML I am trying to add a for loop(v-for) in my row div so the row can display each of data in my availableData variable, but I am having some problems trying to pass d1 to the first row and d2 to the second,
<div id="c1" class="columns">
// ...some code
<div class="row" v-for="data in availableData">
<div class="cell">
{{data.col1}}
</div>
<div class="cell">
{{data.col2}}
</div>
<div class="cell">
{{data.col3}}
</div>
<div class="cell">
{{data.col4}}
</div>
<div class="cell">
{{data.col5}}
</div>
</div>
</div>
Of course, the v-for statement is not correct since I am trying to iterate through the availableData array, if I were to write
v-for="data in availableData[i]"
then is there a way to pass a varaible like i to achieve iteration, or is this method not a plausible way to conduct?

You have several solutions to do what you want.
Solution # 1 :
You can alter the availableData to display all data like you want. You have just to flat you array like this : const availableData=[...d1, ...d2];
With such a code your availableData variable will have :
const availableData = [{col1:"aaa1",col2:"bbb1",col3:"ccc1",col4:"ddd1",col5:"eee1"},
{col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"},
{col1:"fff1",col2:"ggg1",col3:"hhh1",col4:"iii1",col5:"jjj1"},
{col1:"aaa2",col2:"bbb2",col3:"ccc2",col4:"ddd2",col5:"eee2"}]
Solution # 2
You can make a double iteration in your template :
<div class="data" v-for="data in availableData">
<div class="row" v-for="row in data">
<div class="cell">
{{row.col1}}
</div>
<div class="cell">
{{row.col2}}
</div>
<div class="cell">
{{row.col3}}
</div>
<div class="cell">
{{row.col4}}
</div>
<div class="cell">
{{row.col5}}
</div>
</div>
</div>

How to show component selector on click event Angular5

I am getting issue while display another component on click event, here is my code:
<div (click)="showThis = true"></div>
<div class="" [ngClass]="{'hide': showThis}"></div>
<div class="" [ngClass]="{'show': showThis}">
<another-screen></another-screen>
</div>
its displaying both, first should display without any click, if click event then this hide first and another component will display
means hide and show class will apply
any help
Thanks

Why you don't use hidden:
<div (click)="showThis = true"></div>
<div class="" [hidden]="!showThis"></div>
<div class="" [hidden]="showThis">
<another-screen></another-screen>
</div>
*ngIf removes the html element from DOM but [hidden] is use for display none or block html element same as hide and show

Why not use *ngIf
<div (click)="showThis = true"></div>
<div *ngIf="!showThis "></div>
<div *ngIf="showThis ">
<another-screen></another-screen>
</div>

Boostrap 3 accordion with chevron and bar color change

based on the solution that work perfectly for the chevron (Bootstrap 3 Collapse show state with Chevron icon):
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
There is a way to change also the panel class from .panel-default to .panel-primary when then panel is open?
i've this panel setup:
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse6">
<h4 class="panel-title">
<a class="accordion-toggle">PANEL TITLE</a><i class="indicator glyphicon glyphicon-chevron-right pull-right"></i>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<fieldset>
...
</fieldset>
</div>
</div>
</div>
thank you so much.

The following code would help. So on click you select the parent element of the target which would be the div tag containing panel-default class and then you just toggle panel-default and panel-primary classes.
function toggleChevron(e) {
$(e.target).parent().toggleClass('panel-default');
$(e.target).parent().toggleClass('panel-primary');
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
link: http://jsfiddle.net/saa93/hpzj2z5a/1/

How to click a parent element using the child element for the following scenario

I am using selenium webdriver to automate. I have a special case below.
<div id = "A">
<div id = "container">
<div id="innercontainer">
<div>
<div id="ruleContainer">
<span id="rule">CNET</span>
<div id="name">CNET></div>
</div>
</div>
</div>
</div>
<div id = "A">
<div id = "container">
<div id="innercontainer">
<div>
<div id="ruleContainer">
<span id="rule">GNET</span>
<div id="name">GNET></div>
</div>
</div>
</div>
</div>`<div id = "A">
<div id = "container">
<div id="innercontainer">
<div>
<div id="ruleContainer">
<span id="rule">DNET</span>
<div id="name">DNET></div>
</div>
</div>
</div>
</div>`
Here I need to click on element A with text CNET... I am able to get to the child CNET but it is a dead element. So I need to click on anchor for element A having that particular child.
How can I do that? Is there a way? I know the solution for looping but my application refreshes so often and I encounter stale exception because of it. So could some one give me a better solution like navigating back to the parent and then to the sibling and click().

try this xpath:
//div[#id='A' and .//span[contains(text(), 'CNET')]]//a
it searches for the div with id = 'A' that has a span that contains the text 'CNET', from that div it selects the anchor-child-element

Aurelia nested repeat.for context of parent repeat.for

When nesting repeat.for in Aurelia, an internal repeat.for does not have access to the variable used in it's parent repeat.for.
Example
<div repeat.for="x of 8">
<div repeat.for="y of 8">
${x} - ${y}
</div>
</div>
In the above example, ${x} does not emit anything. How do you get the x value when inside the internal repeat.for?

Found my answer. You need to do the following:
<div repeat.for="x of 8">
<div repeat.for="y of 8">
${$parent.x} - ${y}
</div>
</div>