Using separate click event on input Elements with pipe in Angular

Question

I've created an Elevator app, with elevator component that displays a box with a value for the current floor, looking like this:

I've used a custom pipe to display the word 'lobby' instead of the number 1. I'm trying to add buttons to move elevator up and down by using a service (Elevator service -> up and down functions to decrease and increase the value in the box). Right now, my buttons are not working. I thought I need to use [(ngModel)] but I know I can't use it with a pipe. What am I doing wrong?

My code:

custom pipe-

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'lobbyPipe'
})
export class LobbyPipePipe implements PipeTransform {

  transform(value: number): unknown {
    if(value === 1){
      return "lobby";
    }
    else {
      return value;
    }
  }
}

service -

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ElevatorService {

  floorNum: number=0;

  constructor() { }

  up(){
    Number(this.floorNum);
    this.floorNum++;
  }

  down(){
    Number(this.floorNum);
    this.floorNum--;
  }
}

component-

  export class ElevatorComponent implements OnInit {

  @Input() floorNum : number =2;
  dateFirst: Date=new Date();

  constructor(private elevatorService: ElevatorService) { }

  ngOnInit(): void {

  }

  up(){
    this.elevatorService.up();
  }

  down(){
    this.elevatorService.down();
  }
}

html -

<div class="elevator">
floor:
    <input class="input-warrper" [ngModel]="floorNum | lobbyPipe"   name="floorNum" type="text">
    <p *ngIf="floorNum===1">
        {{dateFirst | date: "MM/dd/yy"}}
    </p>
</div>

<input type="button" value="Go upstairs"  (click)="up()">
<input type="button" value="Go downstairs" (click)="down()">

You declared floorNum as Input in elevator component. But you are incrementing/decrementing different floorNum in Service. There is no connection between elevator floorNum variable and floorNum present in your service. — Sivakumar Tadisetti, Jun 05 '22 at 10:08

score 0 · Answer 1 · answered Jun 06 '22 at 03:42

0

Bind to floor number in elevator service. floorNum in component and floorNum in elevatorService are different in memory.

<input class="input-warrper" 
[ngModel]="elevatorService.floorNum | lobbyPipe"   
name="floorNum" type="text">

Afterwards, this is unused and can be removed.

  @Input() floorNum : number =2;

answered Jun 06 '22 at 03:42

Joosep Parts

5,372
2
8
33

I understand the problem but if I'm writing: [ngModel]="elevatorService.floorNum | lobbyPipe" I'm getting this error message- "Property 'elevatorService' is private and only accessible within class 'ElevatorComponent' ". How can I bind it in a different way? – Inbar Manor Jun 06 '22 at 06:10
use in constructor `(public elevetorService){}`. NOTE When we want use a two binding (if it's only one binding way not use an Input, use a simple span) with diferent value, you can use focus and blur event. In this [SO](https://stackoverflow.com/questions/55487955/how-to-create-an-input-where-display-and-model-value-differ/55488710#55488710) I use a directive, in [this another](https://stackoverflow.com/questions/68732277/number-pipe-taking-only-three-digits-before-decimal/68732683#68732683) a variable – Eliseo Jun 06 '22 at 06:39

Using separate click event on input Elements with pipe in Angular

1 Answers1