(How) can an Angular component be split into multiple, individual parts?

Question

Disclaimer This question doesn't regard the patter of creating components and their subcomponents (as discussed here). It doesn't consider the choice of components and their type (as discussed here). It's not meant to be opinion based and I do apologize in advance if my linguistic skills fail me when formulating it.

We have a component with quite some logic (specific to that certain component and none other). The logic updates a lot of entries based on input in others. The updates are governed by a complex set of irregular business rules. With time, the component grew large and needs some heavy scrolling. That suggests that it's time to refactor it.

In C#, I could use partial and create a file holding the rest of the class out of sight for the current development. As far I've looked, it's been asked for but isn't implemented at the moment, nor about to.

I could create a set of separate utility classes specific for this particular component. It seems like a hack, though. I'm figuring like so.

<plopp (click)="onClick($event)">...

...
onClick(event: KeyboardEvent) { Aux.onClick(event, this.something, ...); }

Also, Even if I created a separate class handling all the events (it would make huge sense in our case), I still need a method that the template file can bind to (and then convey the call to the auxiliary) and it'd require to send most of the properties to the the auxiliary too.

What is the by-the-book approach in this case? As the linkage shows, I've dug into that extensively but I come up with rather little. Admittedly, it's not the most common scenario but it is a scenario and I prefer to believe that it can be addressed in a proper way.

Is your question just about keeping an overview and find specific parts in the component faster? If so you could also use `//#region` and `//#endregion` markers to categorize the areas in the component (event handlers, functions...), and that can be folded and unfolded (assuming you are using Visual Studio Code) — schlonzo, Jun 05 '19 at 10:55
@schlonzo I wasn't aware there was a region facility in TypeScript. I use regionizing in backend code and do find it very helpful. However, in TS, I haven't seen that. Is it a feature that's specific to VS Code? I didn't get the TS code to transpile to JS and my Lint complains about it. Do I miss something? — Konrad Viltersten, Jun 05 '19 at 14:23
Yes I think that's an exclusive Visual Studio Code Feature. I'm confused, that it causes your code not to transpile and that your Linter complains. It's just a comment, which is handled special by VS Code. Maybe the Linter doesn't like, that there is not empty space between _//_ and _#_. See [here](https://code.visualstudio.com/updates/v1_17#_folding-regions) for further info about regions in TypeScript and VS Code — schlonzo, Jun 06 '19 at 05:39
@schlonzo How silly of me. I must have had C#-style on my mind and didn't notice the double slashes in your comment. I simply tried `#region` like I'm used to in C# and, like I mentioned, it didn't work. Once I followed your actual advice, id did work (and Lint didn't complained despite the missing space, which is a bit weird but at the moment I'm satisfied in my ignorance on that subject). — Konrad Viltersten, Jun 07 '19 at 07:49
@schlonzo You might want to put your comment with a short sample as an answer so I can accept it. — Konrad Viltersten, Jun 07 '19 at 08:16

schlonzo · Accepted Answer · 2019-06-07T13:54:55.807

1

Taking the assumption, that you are using Visual Studio Code and your question is just about making the big amount of code more clear you could use a featured marker for creating regions like you may know from C#.

It's being used the following way:

export class ExampleComponent {

    // #region I want this to be foldable
    ...
    A lot of code
    ...
    // #endregion

}

If you want to have further information about the region feature using Visual Studio Code, have a look here: https://code.visualstudio.com/updates/v1_17#_folding-regions

edited Jun 07 '19 at 13:54

answered Jun 07 '19 at 13:31

schlonzo

1,409
13
16

1

This won't take a 1000+ lines code and magically make it into a 200 lines code. This is not refactoring. That code should be split into different files. – bokkie Nov 02 '20 at 19:11

(How) can an Angular component be split into multiple, individual parts?

1 Answers1