0

I used angular-gridster2 to implement widget for my angular application.

the code is just like this: 

  <div class="options-header">
    <button  color="accent" (click)="pushItem()" class="add-button cols-2">
      Resize first item and push others
    </button>
    <button (click)="addItem()" class="add-button cols-2">
     add
    </button>
  </div>
<gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
      <div class="button-holder">
        <button (mousedown)="removeItem($event, item)"
                (touchstart)="removeItem($event, item)">
          delete
        </button>
        <ng-container *ngComponentOutlet="item.widgetComponent"> </ng-container>
      </div>
    </gridster-item>
  </gridster>

and grid.ts

import { HelloWorldComponent } from './../hello-world/hello-world.component';
import { Component, OnInit, ViewChild, AfterViewInit, OnChanges } from '@angular/core';
import { GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2';

@Component({
  selector: 'app-gridster',
  templateUrl: './gridster.component.html',
  styleUrls: ['./gridster.component.css']
})
export class GridsterComponent implements OnInit, AfterViewInit {
    options: GridsterConfig;
    dashboard: Array<GridsterItem>;
    itemToPush: GridsterItemComponent;

    @ViewChild(HelloWorldComponent) helloWorldComponent: HelloWorldComponent;

    static itemChange(item, itemComponent) {
        console.log('itemChanged', item, itemComponent);
      }

      static itemResize(item, itemComponent) {
        console.log('itemResized', item, itemComponent);
      }
  constructor() { }

  ngOnInit() {
    this.options = {
        draggable: {
            enabled: true
          },
        itemChangeCallback: GridsterComponent.itemChange,
        itemResizeCallback: GridsterComponent.itemResize,
      };

      this.dashboard = [
        {cols: 2, rows: 1, y: 0, x: 0, widgetComponent: HelloWorldComponent},
        {cols: 2, rows: 2, y: 0, x: 2, widgetComponent: HelloWorldComponent}
      ];
  }

  changedOptions() {
    this.options.api.optionsChanged();
  }

  removeItem(item) {
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

  addItem() {
    this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1});
  }
  initItem(item: GridsterItem, itemComponent: GridsterItemComponent) {
    this.itemToPush = itemComponent;
  }

  ngAfterViewInit() {
    console.log(this.helloWorldComponent.idAdded);
    if (this.helloWorldComponent.idAdded) {
        alert('asdfasdfasdfa');
    }
  }


}

that works very well, But I want to realize, that the child component passes value to parent component, or the parent component listens the change of child component.

for example, I have the other component called helloWorld

<p>
  hello-world works!
</p>
<button (click)="addItem()" class="add-button cols-2">
        add
       </button>

hello world.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
public idAdded: boolean;
  constructor() { }

  ngOnInit() {
      this.idAdded = false;
  }

  addItem() {
    this.idAdded = true;
  }

}

I have tried with ViewChild method, but it was not working. my goal is that if the parent knows or listens the button, which is in child component, is clicked, will the new widget be created.

any solutions?

Can somebody show me more?

Best Regards,

Leo

user1938143
  • 1,022
  • 2
  • 22
  • 46
  • What is the problem here? Why not project them conditionally using `*ngIf` directive? – Amit Chigadani Apr 07 '19 at 11:58
  • Try to use `ngAfterViewChecked` life cycle method instead of `ngAfterViewInit`. That will be called whenever the view gets updated. – Amit Chigadani Apr 07 '19 at 13:21
  • the "clasic" solution is has an @Output()data=new Emitter() and call the function as data.emit(what-ever-you-want); see https://angular.io/guide/component-interaction#parent-listens-for-child-event – Eliseo Apr 07 '19 at 14:49
  • but in this case, I can not use output to pass the data from child component to parent, because the child component will be import in ts file directly. – user1938143 Apr 08 '19 at 09:24
  • just like this {cols: 2, rows: 1, y: 0, x: 0, widgetComponent: HelloWorldComponent}, – user1938143 Apr 08 '19 at 09:25

0 Answers0