CODEWITHSUNDEEP
javascripthtmlcssangular
dizzydizzy
dizzydizzy

Reputation: 157

ngClass not showing 2 classes simultaneously

I've got a ngClass directive that doesn't show both classes stated, only one of them. I've called the classes by { className: condition, className2: condition }. These are supposed to show when some non-exclusive conditions are met, but I am not able to see both of them (it's supposed to show two little '!' markers, one for each class)

The ngClass directive

<div class="custom-table-row" *ngFor="let item of list;" (click)="select( item, $event )" (dblclick)="view( item )"
[ngClass]="{ 'active': action.exists( item ),  'notificationempaque': tieneEmpaque( item ),   'notificationauto': item.actividadPendiente( auth.user.id )}" >

The 2 classes here are notificationempaque and notificationauto:

Here is the css style sheets:

.table-custom .custom-table-row.notification:before {
  content: "";
  position: absolute;
  background-image: url(../img/icons/notification_icon.svg);
  z-index: 1;
  width: 15px;
  height: 15px;
  left: 1px;
  top: 6px;
  margin: auto;
  -webkit-animation: wobble-ver-left 0.8s infinite forwards;
  animation: wobble-ver-left 0.8s infinite forwards;

Both are the same, but one of them has a different starting position, so they don't overlap.

I've tried writing it in different ways, using 2 ngClases, and creating a style sheet for

.table-custom .custom-table-row.notificationauto.notificationempaque

But nothing seems to work.

Upvotes: 0

Views: 231

Answers (1)

MauriceNino
MauriceNino

Reputation: 6747

Your problem is that you want to apply two :before selectors to one element. That is not possible. There can be only one :before and one :after selector for each element.

You are just overwriting it now.

For this to work, I would suggest you to wrap one div inside the other and apply the :before to different divs.

OR

Omit the :before and add your images via JavaScript instead of CSS.

Upvotes: 1

Related Questions