Cannot use child input value in parent's [ngClass] logic

Question

I am attempting to pass the user input value from my input through to the parent and use this value to determine which row to highlight within my <li *ngFor... element.

I can actually pass the value through successfully so it seems, as I have set up a console.log to catch what is first emitted by the child component and then also what is caught by the parent, but I just cannot get it to be seen by my [ngClass] logic section...

The logic does work correctly if I hardcode the value of the row I wish to highlight in, but of course, I want to do this programatically.

parent.component.ts

  rowId: number;

  childToParent(val){
    console.log('received from child: ' + val);
    this.rowId = val;
  }

parent.component.html

<app-child (childToParent)="childToParent($event)"></app-child>
<li *ngFor="let item of items" attr.id="item-{{item.id}}" [ngClass]="{'active': item.id === rowId}">
  <div class="item">
   ...
</li>

child.component.ts

@Output() childToParent = new EventEmitter<String>();

  sendToParent(id){
    console.log('sending to parent: ' + id)

    this.childToParent.emit(id);
  }

child.component.html

<input [(ngModel)]="val" (input)="sendToParent(val)"/>

Stackblitz

Everything seems fine except your `rowId`. What is your `rowId`? Is it really numeric from your child component? — Tushar Walzade, Feb 06 '19 at 11:40

score 3 · Accepted Answer · answered Feb 06 '19 at 11:38

3

are you sure item.id and rowId both are number type? you can change "===" into "==" and it will work for both string and number.

answered Feb 06 '19 at 11:38

Sebastian Gomes

775
9
12

Aha! You are correct. Copy/Paste error. I had it sent to `EventEmitter` and then hadn't explicitly stated `type="number"` on the input. A second pair of eyes comes in handy at times :) – physicsboy Feb 06 '19 at 11:43

score 0 · Answer 2 · answered Feb 06 '19 at 11:25

0

Maybe just parseInt val

this.rowId = parseInt(val, 10);

answered Feb 06 '19 at 11:25

ppichier

1,108
1
16
21

Cannot use child input value in parent's [ngClass] logic

2 Answers2