Use public variable in inside function

Question

I have 2 slide toggles where I can want to show the status of my panels using split.js.
What I'm trying to achieve is, when I open/close a panel the property checked of my slide toggle must be set to true/false.

I have 2 public variables in my component:

  public isOverviewVisible: boolean = true;
  public isDetailsVisible: boolean = false

Which I use in my html file

  <div class="col-auto align-self-end">
    <mat-slide-toggle ngDefaultControl (change)="showOverviewChange($event)" [checked]="isOverviewVisible">
      Show overview
    </mat-slide-toggle>
  </div>
  ...

In theconstructor of the component I want to my 2 public variables via the function onDragEnd presented by split.js. The debugger steps into this method when I drag the splitter, but the variables this.isOverviewVisible and this.isDetailsVisible are not the ones I declared as public at the top of my component.

    let split = Split(['#overview', '#detail'], {
      onDragEnd: function () {
        let sizes: number[] = split.getSizes();

        if (sizes[0] < 1) {
          this.isOverviewVisible = false;
        } else {
          this.isOverviewVisible = true;
        }
        ...
      }
    });

The question is, how can I set my public variables inside the function onDragEnd?
Or maybe there is a better way?

Update
I changed my code to use the arrow function, but now I get an error on split.getSizes() : Property 'getSizes' does not exist on type '() => any'.

let split = () => Split(['#overview', '#detail'], {
  sizes: [50, 50],
  minSize: [0, 0],
  direction: 'vertical',
  onDragEnd: function () {
    let sizes: number[] = split.getSizes();
  }
});

Use arrow functions, otherwise `this` will not be what you're expecting. `onDragEnd: () => {` — user184994, Aug 24 '18 at 12:18
Use an arrow function so you don't lose the scope: `onDragEnd: () => { ...` — bugs, Aug 24 '18 at 12:18

score 1 · Accepted Answer · answered Aug 24 '18 at 12:19

1

Try:

let split = () => Split(['#overview', '#detail'], {
      onDragEnd:  () => {
        let sizes: number[] = split.getSizes();

        if (sizes[0] < 1) {
          this.isOverviewVisible = false;
        } else {
          this.isOverviewVisible = true;
        }
        ...
      }
    });

answered Aug 24 '18 at 12:19

Mosè Raguzzini

15,399
1
31
43

Thank you, see updated answer. I get a red line under getSizes(); – Hypenate Aug 24 '18 at 12:33
This is not enough code to say what caused the red line (linter issue, I suppose). Hovering with the mouse on the red line should reveal why that's marked – Mosè Raguzzini Aug 24 '18 at 12:37
The info cause is stated in my updated answer. – Hypenate Aug 24 '18 at 12:43

score 1 · Answer 2 · answered Aug 24 '18 at 12:20

1

You need to use an arrow function in your onDragEnd function so that this is the class instance:

    let split = Split(['#overview', '#detail'], {
    onDragEnd: () => {
      let sizes: number[] = split.getSizes();

      if (sizes[0] < 1) {
        this.isOverviewVisible = false;
      } else {
        this.isOverviewVisible = true;
      }
      ...
    }
});

answered Aug 24 '18 at 12:20

Alen Genzić

1,398
10
17

Thank you, see updated answer. I get a red line under getSizes(); – Hypenate Aug 24 '18 at 12:33

Use public variable in inside function

2 Answers2