What is "..." in Angular2? What its purpose?

Question

What is ... in Angular? And what it is called? I'm thinking what is the use of "...flash" in addFlash method where it is a parameter in the array.push()?

And also in the toggleFlash method why there is "..." if we can just use this keyword?

flashs: IFlash[] = [];

flashs$ = new BehaviorSubject<IFlash[]>(this.flashs);

addFlash(flash: IFlash) {
    this.flashs.push({
        ...flash,
        show: false,
        id: getRandomNumber()
    });
}

toggleFlash(id: number) {
    const index = this.flashs.findIndex(flash => flash.id === id);
    this.flashs = [
        ...this.flashs.slice(0, index),
        {
            ...this.flashs[index],
            show: !this.flashs[index].show
        },
        ...this.flashs.slice(index + 1)
    ];
    this.flashs$.next(this.flashs);
}

It's a feature of ES6, *Spread Syntax*, not part of Angular. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax — zmag, Nov 01 '19 at 07:07
@TonyNgo I think not. Because my question sounds I don't really know what it is and what it is called. — Ronald Abellano, Nov 01 '19 at 07:22

score 0 · Accepted Answer · answered Nov 01 '19 at 07:19

... is es6 Spread_syntax in your code ...this.flashs will add this.flashs items to the array where you'r use it while {...this.flashs[index] will add the properties of the object at given index to the object where you'r using it read the comments in code below for further explanation

 this.flashs = [
        ...this.flashs.slice(0, index),//slice flashs array and add result items here like obj1,obj2....
        {
            ...this.flashs[index],//get object at given index and add that object properties here like prop1:val,prop2:val,...
            show: !this.flashs[index].show
        },
        ...this.flashs.slice(index + 1)
    ];

What is "..." in Angular2? What its purpose?

1 Answers1