I have quite specific scenario where I have to store state inside of item-components (namely, inside canvas elements) that are being created via ngFor loop.
In my list component I have an array of string ids - and I need to create a canvas element for each id. Afterwards some manipulations can occur with canvas data, so if canvas elements are recreated - pixel data will be lost.
However, sometimes the order of string ids may change and, hence, I would also want to change the order in which ngFor renders those canvas elements. Without actually removing them and creating again.
I know, this scenario might sound weird and there are some other ways to handle what I want but at the moment I'm just interested if this would be possible at all in Angular2/4?.
You can manage the object with a @Pipe, you just add the pipe to your code, example:
*ngFor="let field of formFields | keys"
Where keys is a @Pipe.
Check this tutorial for creating a custom @Pipe: https://scotch.io/tutorials/create-a-globally-available-custom-pipe-in-angular-2
As you didn't post any code, I assume you have your "change order of elements within object" functionality ready.
So, you could build your @Pipe like this:
@Pipe({name: 'alterOrder'})
export class AlterOrderPipe implements PipeTransform {
transform(value, args: string[]): any {
let myArray = [];
for (let elem in value) {
if (!isNullOrUndefined(elem)) {
// Alter order functionality
myArray.push(alteredOrderObj); // alteredOrderObj would be the result of your functionality
}
}
return myArray;
}
}
And in your code, you use it like this:
*ngFor="let elem of myArray | alterOrder"
It sounds like you want to visually re-order the elements but not re-render them correct? I believe if you don't want to re-render the elements but want them to present in a different visual order, then your best bet is CSS. Maybe use angular to calculate the positioning and then use CSS positioning.