I have the following code where v-if is always showing true even when doc.acceptance_letter = ''
<a
target="_blank"
class="has-text-link"
v-if="doc.acceptance_letter!=null || doc.acceptance_letter!= '' "
:href="doc.acceptance_letter"
>
view
</a>
I want hide this anchor tag when doc.acceptance_letter is null or empty.
Could anyone advise what I did wrong?
Your code will always show, because it will always be different from null or '' (a variable can't have two values simultaneously). As suggested on comments, you can just check v-if="doc.acceptance_letter that will hide it in any falsy value, or do a v-if="doc.acceptance_letter != null && doc.acceptance_letter != ''
<a
target="_blank"
class="has-text-link"
v-if="doc.acceptance_letter
:href="doc.acceptance_letter"
>
view
</a>
you have to use && instead of ||, to display the tag whendoc.acceptance_letter is not null and not empty.
<a
target="_blank"
class="has-text-link"
v-if="doc.acceptance_letter!=null && doc.acceptance_letter!= '' "
:href="doc.acceptance_letter">
view
</a>
Missing a '='
v-if="doc.acceptance_letter!== null || doc.acceptance_letter!== '' "
I need one help. I need to add multiple condition with AND operator in ng-class using Angular.js. I am explaining my code below.
<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)">
<i ng-class="{'fa fa-minus-circle': place.expanded, 'fa fa-plus-circle': !place.expanded }"></i>
{{place.root_des}}
</div>
Here I am adding one condition but I need to add another condition (i.e-place.cstatus==1 and place.cstatus==0) for both class. Please help.
Use && instead of and.
(i.e-place.cstatus==1 && place.cstatus==0)
As commented before, you can also create a function that takes arguments and return classnames.
Benefit of this approach is, it will keep your view clean and the logic will stay in JS. This will also make it more configurable as you can write a code and share it across multiple elements.
function myCtrl($scope) {
$scope.place = {
expanded: false,
cstatus: 1,
root_des: 'test'
}
$scope.manageCollapseExpand = function(place, seleccted) {
place.expanded = !place.expanded
}
// assuming place should be an array
$scope.getClasses = function(index) {
var className = 'fa ';
if ($scope.place.expanded && $scope.place.cstatus === 1) {
className += 'fa-minus-circle '
} else {
className += 'fa-plus-circle ';
}
return className
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller='myCtrl'>
<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)">
<i ng-class="getClasses(0)"></i>
{{place.root_des}}
<p>Classes: {{getClasses(0)}}</p>
</div>
</div>
Simply you can conbind condition using &&
<div class="mainaccordion_title-width" ng-click="manageCollapseExpand(place, false)">
<i ng-class="{'fa fa-minus-circle': place.expanded && place.cstatus==1, 'fa fa-plus-circle': !place.expanded && place.cstatus==0 }"></i>
{{place.root_des}}
</div>
I'm new to Angular 2 and haven't worked front end before. So I'm not sure how to write a template structural directives. I need to translate this from ejs/angular 1 to Angular 2
for (var i = 0; i < n; i++) {
<% var classes = item.columns[i].fields.skin.indexOf("sign-in") > -1 ? "sign-in" : "" %>
<div class="dropdown menu-standout desktop <%= classes %>">
<a><%= item.columns[i].fields.title %></a>
</div>
}
My best guess was this, but I'm sure I can't have curly brackets twice inside ngFor. Any help?
<li *ngFor="let column of item.columns">
{{var classes = column.fields.skin.indexOf("sign-in") > -1 ? "sign-in":""}}
<div class="dropdown menu-standout desktop" {{ classes }}>
<a>{{column.fields.title}}</a>
</div>
</li>
You can not have binding assignment in template interpolation directive.
So, it should be like this
{{column.fields.skin.indexOf("sign-in") > -1 ? "sign-in":""}}
You can not declared variable inside interpolation directive
Remove the var classes = part from template otherwise it will template parse error.
you want to add a class dynamically, so try this :
<li *ngFor="let column of item.columns">
<div [class.active] = "isActive = 'column.fields.skin.indexOf("sign-in") > -1 ? "sign-in":"" ' " class="dropdown menu-standout desktop">
<a>{{column.fields.title}}</a>
</div>
</li>
it is not good practice to have js code in your view.
in your component
export class MyComponent {
isActive: boolean = false;
}
I fixed the syntax by writing an extra function
<li *ngFor="let column of item[0].fields.columns">
<div class="dropdown menu-standout desktop {{ checkIndex(column) }}" >
<a>{{column.fields.title}}</a>
</div>
</li>
export class PageDropdownComponent {
constructor() {}
checkIndex(classes:any) {
return classes.fields.skin.indexOf("sign-in") > -1 ? "sign-in" : "";
}
Thanks everyone else for the help, it was useful for understanding the syntax
What is wrong with my Angular code? I am getting the following error:
Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass
<ol>
<li *ngClass="{active: step==='step1'}" (click)="step='step1'">Step1</li>
<li *ngClass="{active: step==='step2'}" (click)="step='step2'">Step2</li>
<li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li>
</ol>
Angular version 2+ provides several ways to add classes conditionally:
type one
[class.my_class] = "step === 'step1'"
type two
[ngClass]="{'my_class': step === 'step1'}"
and multiple option:
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"
type three
[ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"
type four
[ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"
You can find these examples on the documentation page
[ngClass]=... instead of *ngClass.
* is only for the shorthand syntax for structural directives where you can for example use
<div *ngFor="let item of items">{{item}}</div>
instead of the longer equivalent version
<template ngFor let-item [ngForOf]="items">
<div>{{item}}</div>
</template>
See also https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
See also https://angular.io/docs/ts/latest/guide/template-syntax.html
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
[class.special]="!isSpecial">This one is not so special</div>
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="badCurly">Bad curly</div>
Another solution would be using [class.active].
Example :
<ol class="breadcrumb">
<li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
That's the normal structure for ngClass is:
[ngClass]="{'classname' : condition}"
So in your case, just use it like this...
<ol class="breadcrumb">
<li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
<li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
<li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>
with the following examples you can use 'IF ELSE'
<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">
You can use ngClass to apply the class name both conditionally and not in Angular
For Example
[ngClass]="'someClass'">
Conditional
[ngClass]="{'someClass': property1.isValid}">
Multiple Condition
[ngClass]="{'someClass': property1.isValid && property2.isValid}">
Method expression
[ngClass]="getSomeClass()"
This method will inside of your component
getSomeClass(){
const isValid=this.property1 && this.property2;
return {someClass1:isValid , someClass2:isValid};
}
Angular provides multiple ways to add classes conditionally:
First way
active is your class name
[class.active]="step === 'step1'"
Second way
active is your class name
[ngClass]="{'active': step=='step1'}"
Third way
by using ternary operator class1 and class2 is your class name
[ngClass]="(step=='step1')?'class1':'class2'"
You should use something ([ngClass] instead of *ngClass) like that:
<ol class="breadcrumb">
<li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
(...)
In Angular 7.X
The CSS classes are updated as follows, depending on the type of the expression evaluation:
string - the CSS classes listed in the string (space delimited) are added
Array - the CSS classes declared as Array elements are added
Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
Additionally, you can add with method function:
In HTML
<div [ngClass]="setClasses()">...</div>
In component.ts
// Set Dynamic Classes
setClasses() {
let classes = {
constantClass: true,
'conditional-class': this.item.id === 1
}
return classes;
}
to extend MostafaMashayekhi his answer for option two>
you can also chain multiple options with a ','
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"
Also *ngIf can be used in some of these situations usually combined with a *ngFor
class="mats p" *ngIf="mat=='painted'"
You can use [ngClass] or [class.classname], both will work the same.
[class.my-class]="step==='step1'"
OR
[ngClass]="{'my-class': step=='step1'}"
Both will work the same!
While I was creating a reactive form, I had to assign 2 types of class on the button. This is how I did it:
<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''"
[disabled]="!formGroup.valid">Sign in</button>
When the form is valid, button has btn and btn-class (from bootstrap), otherwise just btn class.
We can make class dynamic by using following syntax. In Angular 2 plus, you can do this in various ways:
[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"
[ngClass]="{'active': step}"
[ngClass]="step== 'step1'?'active':''"
[ngClass]="step? 'active' : ''"
Let, YourCondition is your condition or a boolean property, then do like this
[class.yourClass]="YourCondition"
The directive operates in three different ways, depending on which of three types the expression evaluates to:
If the expression evaluates to a string, the string should be one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.
[class.class_one] = "step === 'step1'"
[ngClass]="{'class_one': step === 'step1'}"
For multiple options:
[ngClass]="{'class_one': step === 'step1', 'class_two' : step === 'step2' }"
[ngClass]="{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]"
[ngClass]="step == 'step1' ? 'class_one' : 'class_two'"
ngClass syntax:
[ngClass]="{'classname' : conditionFlag}"
You can use like this:
<ol class="breadcrumb">
<li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
<li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
<li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>
This is what worked for me:
[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
For elseif statement (less comparison) use like that: (For example you compare three statement)
<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>
Not relevant with [ngClass] directive but I was also getting the same error as
Cannot read property 'remove' of undefined at...
and I thought to be the error in my [ngClass] condition but it turned out the property I was trying to access in the condition of [ngClass] was not initialized.
Like I had this in my typescript file
element: {type: string};
and In my [ngClass] I was using
[ngClass]="{'active', element.type === 'active'}"
and I was getting the error
Cannot read property 'type' of undefined at...
and the solution was to fix my property to
element: {type: string} = {type: 'active'};
Hope it helps somebody who is trying to match a condition of a property in [ngClass]
<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style="">
<ul> <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}">
<a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i>
<p>Manage</p></a></li>
<li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li>
</ul></div>
Code is good example of ngClass if else condition.
[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"
[ngClass]="{'active': active_tab=='assignservice'}"
Try Like this..
Define your class with ''
<ol class="breadcrumb">
<li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
<li *ngClass="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
<li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>
The example is a bit big, but triggering a class instead of typing inline is my first preferred approach.
this way you can add as many possibilities as you want to your element.
There may be a way for those who want to bind more than one [ngClass] to a single element.
<span class="inline-flex items-center font-medium" [ngClass]="addClass">{{ badge.text }}</span>
import { ChangeDetectionStrategy, Component, Input } from '#angular/core';
type Badge = {
size?: 'basic' | 'large';
shape?: 'basic' | 'rounded';
color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
dot?: boolean;
removeButton?: false;
text?: string;
}
#Component({
selector: 'bio-badge',
templateUrl: './badge.component.html',
styleUrls: ['./badge.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BioBadgeComponent {
#Input() badge!: Badge;
get addClass() {
return {
'px-2.5 py-0.5 text-sx': this.badge.size === 'basic',
'px-3 py-0.5 text-sm': this.badge.size === 'large',
'rounded-full': this.badge.shape === 'basic',
'rounded': this.badge.shape === 'rounded',
'bg-gray-100 text-gray-800': this.badge.color === 'gray',
'bg-red-100 text-red-800': this.badge.color === 'red',
'bg-yellow-100 text-yellow-800': this.badge.color === 'yellow',
'bg-green-100 text-green-800': this.badge.color === 'green',
'bg-blue-100 text-blue-800': this.badge.color === 'blue',
'bg-indigo-100 text-indigo-800': this.badge.color === 'indigo',
'bg-purple-100 text-purple-800': this.badge.color === 'purple',
'bg-pink-100 text-pink-800': this.badge.color === 'pink',
}
}
}
If user want to display the class on basis of && and ||
then below one is work for me
[ngClass]="{'clasname_1': condition_1 && condition_2, 'classname_2': condition_1 && condition2, 'classname_3': condition}"
Example:
[ngClass]="{'approval-panel-mat-drawer-side-left': similar_toil_mode==='side' && showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-side-right': similar_toil_mode==='side' && !showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-over': similar_toil_mode==='over'}"
As the title suggests I am looking for a script command for "if url", then "item." I am working on a wordpress theme that I am translating. All of the content has been translated except for 1 item that is essentially a tile menu item.
I figure the best/only way to translate it since the theme does not support multilungual sites is to give it a javascript condition.
Perhaps I am wrong in my approach but I have been trying something like the following:
if(window.location.pathname == "example.com")
{
<li class="b1">
<a href="http://example.com/?page_id=69">
<h5>Example</h5>
<span>Thank you!.</span>
</a>
</li>
}
else
{
<li class="b1">
<a href="http://example.com/?page_id=69">
<h5>Example</h5>
<span>Merci beaucoup!.</span>
</a>
</li>
If anyone could tell me what im doing wrong that would be pretty cool
Thanks
You can't embed HTML into the middle of your javascript like that - everything in a script has to be actual javscript. You can use javascript to insert HTML into the DOM, either at the current position or in other positions in the document. For example, you could do this in your HTML:
<li class="b1">
<a href="http://example.com/?page_id=69">
<h5>Example</h5>
<span><script>
if(window.location.hostname == "example.com") {
document.write("Thank you!.")
} else {
document.write("Merci beaucoup!.")
}
</script></span>
</a>
</li>
You will also have to fix your javascript logic because location.pathname does not contain the domain - perhaps you meant to use .hostname instead.
your if statement is wrong because you are checking your domain against the path.
you should replace
window.location.pathname
with
window.location.hostname
put the javascript only where you need the text replaced: no need to write all the html twice.
if(window.location.hostname == "example.com") {
document.write("Thank you!.")
} else {
document.write("Merci beaucoup!.")
}
Something like this works.
<ul>
<li class="b1"> </li>
</ul>
<script language="javascript">
if(window.location.hostname == "example.com") {
document.querySelector('.b1').innerHTML = "<a href='http://example.com/?page_id=69'><h5>Example</h5><span>Thank you!.</span></a>";
}
else
{
document.querySelector('.b1').innerHTML = "<a href='http://example.com/?page_id=69'><h5>Example</h5><span>Merci beaucoup!.</span></a>";
}
You maybe should use a regular expression to catch the url, did you already tried?
<li class="b1">
<a href="http://example.com/?page_id=69">
<h5>Example</h5>
<span><script>
var expression = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
if (window.location.hostname.match(regex) ){
<span>Thank you!.</span>
}
else{
<span>Merci beaucoup!.</span>
}
</script></span>
</a>
</li>