How to fix the angular gridster appending data

Question

here's the code:

app.component.html

<input type="text" [(ngModel)]="newAreaName"/><button (click)="addItem()" [disabled]="editing ? false : true">ADD</button>
<button (click)="toggleEditing()">{{ editing ? 'Cancel' : 'Edit'}}</button>
<app-line (layout)="setFloorLayout($event)" [editing]="editing" [newAreaName]="newArea"></app-line>

app.component.ts

flrLayout = [];
  editing = true;

  newAreaName = "";
  newArea = "";

  setFloorLayout(data: any) {
    this.flrLayout = data;
  }

  addItem(): void {
this.newArea = this.newAreaName;
this.newAreaName = "";
console.log(`SUCCESS ADDING`);
  }
  toggleEditing() {
    this.editing = !this.editing;
  }

child component line.component.ts

@Input() newAreaName: string;
  @Output() layout: EventEmitter<any> = new EventEmitter();
  @Input() editing: any;

  options: Safe;

  dashboard = [];

  ngOnInit() {}

  ngOnChanges() {
    console.log(this.dashboard);
    if (this.newAreaName && this.editing) {
      this.addItem(this.newAreaName);
    }
  }
  addItem(areaName: string): void {
    this.dashboard.push({ x: 0, y: 0, cols: 1, rows: 1, area: areaName });
    this.layout.emit(this.dashboard);
  }

The problem here is after adding new data, when i click the cancel and then when I try to click the edit button it will automatically appending a new data. instead the dashboard array will be empty.

here's the code & output: https://stackblitz.com/edit/angular-rc7bbz?file=src%2Fapp%2Fapp.component.ts

NOTE: after adding data it, click cancel then click the edit button.

Let say there's a existing data

dashboard = [{
area: "Area1"
cols: 1
rows: 1
x: 0
y: 0
}]

then add a "Area2" the data should be like this.

 dashboard = [{
    area: "Area1"
    cols: 1
    rows: 1
    x: 0
    y: 0
    },{
    area: "Area2"
    cols: 1
    rows: 1
    x: 0
    y: 0
    }]

then when it click the cancel button and click the edit button it should be like this:

dashboard = [{
        area: "Area1"
        cols: 1
        rows: 1
        x: 0
        y: 0
        }]

Crocsx · Accepted Answer · 2020-10-29T02:25:28.630

1

your line.component.ts contain the following line


  ngOnChanges() {
    if (this.editing) {
      this.addItem(this.newAreaName);
    }
  }
  addItem(areaName: string): void {
    this.dashboard.push({ x: 0, y: 0, cols: 1, rows: 1, area: areaName });
    this.layout.emit(this.dashboard);
  }

everytime one of the following input

  @Input() newAreaName: string;
  @Input() editing: any;

changes while editing is true, a new item will be pushed.

It is not a good practice what you are doing, basically, you are creating the element from your component, using a text input change event as trigger. You probably want to change the logic and add the button inside your app-line component (or the addItem outside of that component)

One quick but a bit ugly solution I could think of mantaining your implementation is using a boolean for trigger =>

https://stackblitz.com/edit/angular-9geygo?file=src/app/line/line.component.ts

edited Oct 29 '20 at 02:25

answered Oct 29 '20 at 02:16

Crocsx

2,534
1
28
50

I added this ```if (this.newAreaName && this.editing) { this.addItem(this.newAreaName); }``` but it still the same. when I try to cancel and edit 2-3x or more than it appending/adding data. – ABC Oct 29 '20 at 02:23
@ABC I made a quick (but not very clean) solution. – Crocsx Oct 29 '20 at 02:25
I test it, but it continue appending when adding a new item. let say there's a one item which is AREA1 then when it add a new item which is the AREA2 it will add from the array and then when it click the cancel button the array should be empty and when it click the edit button the array only have 1 item which is the AREA1 which is the existing data. – ABC Oct 29 '20 at 02:32
i added the changes.requestAdd.currentvalue but its undefined, when adding ```?.``` error is missing white space – ABC Oct 29 '20 at 02:59
if you use old typescript version, do not use `?.` use `if(changes.requestAdd && changes.requestAdd.currentValue)` the `?.` only work in recent typescript versions – Crocsx Oct 29 '20 at 03:28
the version I'm using is ```"typescript": "~3.6.4"```. I test on my side and then after adding data it didn't display the console. ```if (changes.requestAdd && changes.requestAdd.currentValue) { console.log('Add'); }``` – ABC Oct 29 '20 at 03:39
I added some log for you : https://stackblitz.com/edit/angular-vdfgmy?file=src/app/app.component.ts If the above don't work, there might be factor in your code that are not shared in the stackblitz. Also, if you talk about editing now working, in your demo, there are no method implemented for editing an existing value, so I did not add that part, I just fixed the dublicated issue. – Crocsx Oct 29 '20 at 03:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223793/discussion-between-abc-and-crocsx). – ABC Oct 29 '20 at 03:59

HenryDev · Answer 2 · 2020-10-29T04:07:52.817

0

You can update your ngOnChanges. Here's a working solution that does what you're asking.

I set a default record (area: "Area1")
If you add a new record (area: "Area2") it adds it to the array
If you click on Cancel it deletes this last element

If you click on Edit you can see your default element

ngOnChanges() {
  if ((this.editing && !this.wasItemRemoved) || 
   this.isAddButtonPressed) {
   this.addItem(this.newAreaName);
   this.wasItemRemoved = false;
 }else {
   if (this.dashboard.length > this.elementsSize) {
   this.dashboard.pop();
   this.wasItemRemoved = true;
 }
 this.layout.emit(this.dashboard)
 }
}

LIVE DEMO

edited Oct 29 '20 at 04:07

answered Oct 29 '20 at 03:05

HenryDev

4,685
5
27
64

please check - https://stackblitz.com/edit/angular-jprewt?file=src%2Fapp%2Fline%2Fline.component.ts. I try if I have 2 or more than existing data, when I click the cancel it will also delete? – ABC Oct 29 '20 at 03:14
@ABC I updated my answer that will always delete when clicking only on Cancel :). Here's the update: https://stackblitz.com/edit/angular-3xsecf?file=src%2Fapp%2Fline%2Fline.component.ts – HenryDev Oct 29 '20 at 04:05

How to fix the angular gridster appending data

2 Answers2