Angular 2 transform component input

Question

I have a component like

export class InspectionComponent {    
    @Input()
    inspections: Inspections[];
}

I'd like to group the inspections by a date property. Do I use or pipe or is there a way to transform the list in the component? I'm thinking an observable, but I can't figure out if it's possible to observe a component input?

Basically what I'd like to write is something like (I know this doesn't make sense, but it shows the point)

export class InspectionComponent implement OnInit {    
    @Input()
    inspections: Inspection[];

    groups: { date: Date, inspections: Inspection[] };

    ngOnInit() {
        inspections.groupBy(...).subscribe(groups => this.groups = groups);
    }
}

I've read on the Angular Docs on Pipes that it is strongly recommended to do filtering and sorting in the component logic.

Where does inspections data come from? Where, when, how often do you want to transform? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 12, 2016 at 9:52
It comes from an http service, so it's not changed often. I want to regroup the inspections list everytime it changes, and preferably in the component logic. — altschuler
– altschuler, Commented Sep 12, 2016 at 9:57
I don't think a pipe is a good idea here. What's the problem with the observable approach? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 12, 2016 at 9:58
Well, basically just that inspections is not an observable. Would the input then have the type Observable<Inspection[]> and then I need to change the parent component to handle an observable instead of a regular array? It seems a little convoluted, I'd like it better if the InspectionComponent could just take a regular list and group it. — altschuler
– altschuler, Commented Sep 12, 2016 at 10:02

Günter Zöchbauer · Accepted Answer · 2016-09-12 10:04:54Z

4

You can make inspections a setter, this way, every time when inspections are updated, grouping is executed:

groupedInspections: Inspections[]
@Input()
set inspections(inspections: Inspection[]) {
  this.groupedInspections = ...
}

In the view you bind then to groupedInspections.

You should be aware that this is not called when items are added/removed to the passed array.

answered Sep 12, 2016 at 10:04

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

altschuler Over a year ago

That seems great, but I do need to group when items are added/removed. I suppose I want to regroup everytime angular redraws.

Günter Zöchbauer Over a year ago

"I want to regroup everytime angular redraws." that sounds expensive. If you don't need to group when items are added/removed, then the approach in my answer is probably the best fit.

altschuler Over a year ago

Well, I don't really need to regroup whenever angular redraws, but I just need any changes in the inspections list to be reflected.

Collectives™ on Stack Overflow

Angular 2 transform component input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related