I'm currently trying to combine a class.bind attribute with a basic html class into an html component through a condition. Like:
<a href="#" class="stackpanel stretch" class.bind="myCondition == true ? 'myClass' :''">
And I want to get (if myCondition = true):
<a href="#" class="stackpanel stretch myClass">
Can you please tell me what's the best way to do this?
You don't need to specify a class.bind along with the class, you can use the interpolation syntax along with the normal classes in a class attribute.
<a href="#" class="stackpanel stretch ${myCondition == true ? 'myClass' : ''}">
Related
I need to get rel="" into this html. This is part of AEM, so I have an xml file doing this:
content.xml
<rel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML attribute to apply to the component."
fieldLabel="Rel"
name="./rel"/>
I've tried just duplicating how id is handled, along with a million other things...
button.html
<button
data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
data-sly-element="${button.buttonLink.valid ? 'a' : 'button'}"
type="${button.buttonLink.valid ? '' : 'button'}"
id="${button.id}"
rel="${button.rel}" <--THIS DOES NOT WORK
class=""
data-sly-attribute="${button.buttonLink.htmlAttributes}"
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}"
data-cmp-data-layer="${button.data.json}">
<span data-sly-test="${button.text}" class="">${button.text}</span>
</button>
You can use the properties object with a HTL context attribute.
<button rel=${properties.rel # context='attribute} </button>
this was the answer
rel=${properties.rel}
I'm conditionally rendering a div in my React app. This...
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades.</div>
works but I want to include a link in the second option like so
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades. Click <a to={{/page}}>here</a> to make a trade.</div>
But I'm getting this error: "Parsing error: Invalid regular expression flag" at the closing a tag.
Why is this?
This happens because you should use the to this way:
Notice: if you are using the html a tag, you would probably want to change to to href
<a to="/page">here</a>
// or
const to = "/page"
...
<a to={to}>here</a>
I'm currently running into a problem where I am trying to make a li tag have specific classes based on a Ruby variable by using a ternary operator:
<li class=<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>>
...
</li>
I expect the results to be an li element with both the nav-item and active classes if #ruby_var is true:
<li class="nav-item active">
...
</li>
However, for some reason, I am getting unexpected results where it only sets the class to the first part of the string that is in the ternary operator, and leaves the second part outside of the class tag:
<li class="nav-item" active>
...
</li>
I have tried using more than one space in my "nav-item active" string but any white space seems to make the class only accept the first elem in the string.
What is the proper way to use the ternary operator to set an HTML tag's classes?
You can write it like this
<li class="<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>">
# ...
</li>
Note the " outside of the erb expression.
Or you can use tag helper like this
<%= tag.li, class: ["nav-item", (:active if loc == #ruby_var)] do %>
# ...
<% end %>
I like the second option better because I prefer not to mix HTML and ERB when describing a tag.
My navigation bar,
<div *ngIf = ("path == '/login'" && "path == '/home'") class="tabs-header-nav">
<a routerLink="/login" class="nav-link active">login</a>
<a routerLink="/bb" class="nav-link">home</a>
<a routerLink="/" class="nav-link">CC</a>
</div>
<div *ngIf = ("path == '/aa'" || "path == '/bb'") class="tabs-header-nav">
<a routerLink="/aa" class="nav-link active">aa</a>
<a routerLink="/bb" class="nav-link">bb</a>
<a routerLink="/" class="nav-link">CC</a>
</div>
Likewise I have 5 to 6 navigation bar in my html. Now I need to display a particular navigation bar for particular page. Single if condition ( *ngIf = "path === '/aa'" ) seems to be working, where if I give multiple conditions it is not working. Could you please help me on this?
You should go for ngSwitch that takes multiple values
<div [ngSwitch]="path">
<div *ngSwitchCase="'/login'">...</div>
<div *ngSwitchCase="'/home'">...</div>
</div>
I have created a Stackblitz demo here
I think you are doing mistake in *ngIf quotations
If you have data that may in every time be different, mostly you use of If. but if is not ok in every where. It is better that you use of switch-case in your code like:
public string TestSwitchCase(string value)
{
switch (value)
{
case "John":
return null;
case "Jack":
return "Jack";
default:
break;
}
return null;
}
Now in angular, there is best way to do this in HTML code. this is ngSwitch and use like:
<container-element [ngSwitch]="switch_expression">
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<ng-container *ngSwitchCase="match_expression_3">
<!-- use a ng-container to group multiple root nodes -->
<inner-element></inner-element>
<inner-other-element></inner-other-element>
</ng-container>
<some-element *ngSwitchDefault>...</some-element>
</container-element>
For more information See: This
GoodLuck.
[SOLUTION] : Simply use "&&" operator to add multiple conditions in *ngIf -
//TypeScript File - demo.ts
//Declaration
flag: any;
temp_array = [];
//Assignment
this.flag = true;
this.temp_array = [1,2];
<!--HTML File - demo.html-->
<div *ngIf="flag && temp_array.length>0">
Both *ngIf conditions passes
</div>
I am using Laravel 5.0, and I would like to make the class of an element 'active' if the url contains the word 'dashboard'. I was able to achieve this in Laravel 5.4 as:
<li class="{{request()->is('dashboard') ? 'active':'inactive'}}">
But this does not work in Laravel 5.0. Can someone provide a solution which would work?
A really clean solution would be creating a helper function to help you like so:
function set_active($uri)
{
return Request::is($uri) ? 'active' : 'inactive';
}
and then in your blade file:
<li class="{{set_active('dashboard')}}">
If you want to check if the url CONTAINS dashboard you need to add some wild cards. right now you're just checking that the path IS dashboard. The example below will set class active any time the path starts with admin/hub
<li class="{{ Request::is('admin/hub*') ? 'active' : '' }}">
<a href="{{ url('admin/hub') }}" id="hub">
<i class="fa fa-desktop"></i> <span>Hub</span>
</a>
</li>
If you want to set the class if the request contains dashboard ANYWHERE use
Request::is('*dashboard*') ? 'active' : ''
You can try something like this:
#if (strpos(Request::url(), 'dashboard') !== false)
<li class="active">
#else
<li class="inactive">
#endif