I have a series of a tags that represent steps. As shown here, if step one is the current step, apply the step-active class.
<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1 }">
Step 1
</a>
Now, I'd like also to add another condition which related to the contain of the page. Let's user has responded to all the required questions. I'd like to highlight the step by green if the step is valid, otherwise by red.
<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1,
isValid ? 'valid-state' : 'invalid-state' }">
Step 1
</a>
I'm getting an error about missing :. How to apply this 2 conditions given that the first one is just a simple condition while the second is a ternary one.
Thanks for helping
<a (click)="goStep2" [ngClass]="{'step-active': currentStep === 1,
'valid-state' : isValid, 'invalid-state': !isValid }">
Step 1
</a>
Related
So I am using ng-bootstraps datepicker to display some user data for each day. I use custom day template to apply certain CSS classes
<ng-template #customDay let-date>
<div
class="custom-day"
[ngClass]="evaluatePresenceType(date)"
>
{{ date.day }}
</div>
</ng-template>
The thing is this method is being called many times for each day which is less than optimal.
Is there a way to apply CSS class to every day just once, when the datepicker is being rendered and not every time I click anywhere?
When you want to use a custom template day to give some class to "specials days" you has two approach:
Use [ngClass] or [class.myClass]="function(date)" as you
indicate
Use DayTemplateData (see the docs)
Well, the doc is not very clear. The idea is to have a function,e.g.
data=(date: NgbDate, current?: {year: number, month: number})=>
{
//see that futhermore the "date" you has an object
//current with two properties: "year" and "month" that is showing
return this.calendar.getWeekday(date)>=6?'square':null
}
Then you use
<input class="form-control" [dayTemplateData]="data"
[dayTemplate]="customDay" ...>
And your template day pass the "data" using let-data=data
<ng-template #customDay let-date let-data="data" ...>
<span class="custom-day" [ngClass]="data" ...>
{{ date.day }}
</span>
</ng-template>
See that if you only want to apply an unique class your function can return true or null and use [class.myClass]="data"
In the stackblitz, I use the two approach and use two counters to show the improve of this another approach
I'm trying to style a component properly. At the moment, the table works beautifully, but the style of it isn't ideal, and usually this would be easy to fix with tailwind but the components layout makes it very confusing to know exactly how to style it.
This is the example I am referencing,
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink
Now specifically what I want to change is the group functions. Currently the use emoji's to work, I really want to to be a proper button so users understand very clearly the functionality of the component, as below.
<table className="w-full text-md bg-white shadow-md rounded mb-4" {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th className={td_header} {...column.getHeaderProps()}>
<div>
{column.canGroupBy ? (
// If the column can be grouped, let's add a toggle
<span {...column.getGroupByToggleProps()}>
{column.isGrouped ? 'Click to Un-Group 🛑 Click to Sort!' : ' Click to Group 🔮 Click to Sort!'}
</span>
) : null}
<span {...column.getSortByToggleProps()}>
{column.render('Header')}
{/* Add a sort direction indicator */}
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</div>
{/* Render the columns filter UI */}
<div>{column.canFilter ? column.render('Filter') : null}</div>
</th>
))}
Now ideally I want something like this for the group and filter toggle, taken from tailwind
https://tailwindcss.com/components/buttons
<div class="inline-flex">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">
Group
</button>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r">
Filter
</button>
</div>
How does one go about styling this effectively, given the string it is using is not a component and does not have any styling that I can see involved?
Thanks in advance,
The string present in your question is not a component, but it easily could be. Those elements don't necessarily need to be strings; react-table is a headless library, so you're free to change the visuals the way you want. There are a variety of possible solutions here. One solution would be to replace the entire ternary by defining a custom functional component for that sort icon:
const sortIcon = (sorted, sortedDesc) => {
if (sortedDesc) {
return (<h1> this is arbitrary </h1>);
} else if (sorted) {
return (<h2> more arbitrary </h2>);
} else {
return null;
}
}
and then replacing the ternary:
<span {...column.getSortByToggleProps()}>
{column.render('Header')}
{/* Add a sort direction indicator */}
{sortIcon(column.isSorted, column.isSortedDesc)}
</span>
This is a bad way to do it, probably, and untested beside that, but the point is that the HTML/JSX stuff is arbitrary. Those emoji strings can be replaced with valid JSX in any form. You could do a similar thing with the column.isGrouped ternary, as well! It may be worth looking at some JSX tutorials if you're not already familiar, or re-familiarizing yourself with exactly what a column Object contains if you want to continue to add functionality.
(link caveat: each of the different useX hooks adds more stuff to the column/row/etc Objects, so I just linked the core useTable one)
I used get text/get value with the xpath element, but it's not getting the text/value.
Below are the Code and tried to get text/value and getting element not visible error.
Note : Same element is working For click element.
<div class="cal-month-day cal-day-inmonth cal-day-future cal-day-has-events" ng-class="{
'cal-day-outmonth': !day.inMonth,
'cal-day-inmonth': day.inMonth,
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-future': day.isFuture,
'cal-day-has-events': day.events.length > 0,
'cal-day-selected': vm.calendarCtrl.isSelectedDate(day),
'cal-day-open': dayIndex === vm.openDayIndex
}" ng-click="vm.calendarCtrl.onDateSelection(day.date)">
<small class="cal-events-num badge badge-important pull-left ng-binding" ng-show="day.badgeTotal > 0 && (vm.calendarConfig.displayAllMonthEvents || day.inMonth)" ng-bind="day.badgeTotal">2</small>
<span class="pull-right ng-binding" ng-bind="day.label">2</span>
I am trying to add a 3rd condition to my ngClass. At first, I got the following two class to work in my ngClass to alternate the color of the rows
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}"
I am trying to add a 3rd class and condition where the mat-list will show a border line for the top of the mat-list-item. However when I add the 3rd condition, it gives me an error
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}"
I get the following error which is confusing to me
Parser Error: Missing expected : at column 47 in [{ totalrow:i%2 != 0,
odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}] in
Here is the code with the ngFor
<div class="ng-container" *ngFor="let operator of operatorList; let i = index">
<mat-list-item
fxLayoutAlign="start"
style="padding-left: 0px; padding-right: 0px;"
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}">
<i class="{{operator}}"></i>
</mat-list-item>
</div>
Any help is appreciated.
I guess a commenter needs a deeper explanation of how this works.
<div [ngClass]="{
'is-active': condition,
'is-inactive': !condition,
'multiple': condition && anotherCondition,
}">
multiple class will apply when two conditions are both met. Not just one but both.
You could add a third like this: 'multiple': condition && anotherCondition && thirdCondition
Here's a StackBlitz of the OP's code working as he expected and without error. If I can help more pleas let me know.
I would like to make a rating star so I have the code below:
<g:each in="${1..5}" var="rateCount">
<g:if test="rateCount < myResultList.rating">
<i class="fa fa-star"></i>
</g:if>
</g:each>
I have a rating with 4 and suppose to display 4 stars only.
However there is displaying 5 stars. So I replace the star with ${rateCount < myResultList.rating} between the if statement and I got below items on my page:
true true true true false
What did I do wrong?
I found that the problems is I was missing a ${ tag, the program is working after I changed the if statement as below:
<g:if test="${rateCount < myResultList.rating}">