Can I use 2 ngClass in one div Angular 4

Question

When I click to edit I call a component for the editing so in the component I cannot click anything and hast background black that its oke, but I want for each ID what I select to edit to be active or just to have background white or z-index.

This is my HTML

<div class="name-block" [ngClass]="'name-block-width-' + valueItem.level"
  [ngClass]="{active: activeSelected === valueItem.id, 'name-block': true}" (click)="toggleExpand()">
</div>

This is the css

.name-block {
  @extend %common-block;
  @include center(false, true);
  @include justify-content(space-between);
  margin-left: 1px;
  padding-left: 10px;
  &.active {
    z-index: 950;
  }

  div.businessId {
    @extend %flexbox;
    @include center(false, true);
    border-left: solid thin $border-color;
    padding: 0 5px;
    height: 100%;
  }
}

@for $i from 1 through 7 {
  .name-block-width-#{$i} {
    width: 500px - (($i - 1) * 50px);
  }
}

And this is the TS when I try to edit

edit(editOptions: EditViOptions) {
  this.showChild = !this.showChild;
  if (editOptions.valueItem || editOptions.appendToParentId) {
    this.dataToPass = editOptions;
    this.activeSelected = editOptions.valueItem.id;

  } else {
    this.activeSelected = null;
  }
}

What dou you suggest me to change there or this two functions in one ngClass to call — TheCoderGuy, Jul 19 '18 at 10:30
do as below `[ngClass]="'name-block-width-' + valueItem.leve + {active: activeSelected === valueItem.id, 'name-block': true}" ` — לבני מלכה, Jul 19 '18 at 10:30

Nandita Sharma · Accepted Answer · 2018-07-19T10:39:29.140

2

Use it like this

<div [class]="'name-block name-block-width-' + valueItem.level"  [ngClass]="{'active': activeSelected === valueItem.id}" (click)="toggleExpand()">abc</div>

edited Jul 19 '18 at 10:39

answered Jul 19 '18 at 10:34

Nandita Sharma

13,287
2
22
35

It is working but it is making all the array with z-index it it possible to make only the id what is selected se the TS file – TheCoderGuy Jul 19 '18 at 10:37
It is working I have changed !previewmode and it works super – TheCoderGuy Jul 19 '18 at 10:40
Yeah that i changed to check its syntax in my code. Sorry i corrected it now :) – Nandita Sharma Jul 19 '18 at 10:40
Do you know how to make when I open this component to make like animation from left to right ? – TheCoderGuy Jul 19 '18 at 10:40
I will edit this post and there to write the code for animation :) – TheCoderGuy Jul 19 '18 at 10:44
Please accept the answer if your original query was solved. and I suggest you post another question for the animation part as its not connected to this question – Nandita Sharma Jul 19 '18 at 10:44
I have make a question https://stackoverflow.com/questions/51420697/how-to-create-an-animation-from-left-to-right-or-making-a-fade-angular-4 – TheCoderGuy Jul 19 '18 at 10:48

score 1 · Answer 2 · answered Jul 19 '18 at 10:32

1

You can use [ngClass] only once in each selector:

do it as below:

 [ngClass]="'name-block-width-' + valueItem.leve + ' '+ {active: activeSelected === valueItem.id, 'name-block': true}"

answered Jul 19 '18 at 10:32

לבני מלכה

15,925
2
23
47

score 0 · Answer 3 · answered Jul 19 '18 at 10:42

0

You can do it like this

 <div class="name-block" 
  [ngClass]="{'name-block-width-' + valueItem.level:'name-block-width-' + valueItem.level,
                  active: activeSelected === valueItem.id,  'name-block': true }" 
 (click)="toggleExpand()">

answered Jul 19 '18 at 10:42

Muhammed Albarmavi

23,240
8
66
91

Can I use 2 ngClass in one div Angular 4

3 Answers3