CODEWITHSUNDEEP
htmlangulartypescriptfiledivide
Federico Andreoli
Federico Andreoli

Reputation: 465

Bind html to multiple .ts file in angular

I'm currently working on an Angular app, specifically a quite complex table, in terms of styling and features.

My component file currently has 2k lines of code, and it comprehends functions for styling text, styling the table, functions for check if data treated are correct, data formatting and so on... Many of theese funtions are called directly from the HTML fiel thorugh interpolation.

Is there any way to break up this quite large file into smaller ones?

Upvotes: 0

Views: 938

Answers (1)

code-gorilla
code-gorilla

Reputation: 2418

You can break up your component into smaller ones and nest them.

Typical example:

<app-list>
  <app-list-item></app-list-item>
</app-list>

The parent component can then pass its properties down to the child components:

<app-list>
  <app-list-item [name]="valueFromParent"></app-list-item>
</app-list>

It is further possible to emit values back up from the child to the parent:

<app-list>
  <app-list-item (onChildEvent)="updateParent($event)"></app-list-item>
</app-list>

I tried to keep it simple here, but there is more to it. I suggest going through the official Angular tutorials, because they explain these concepts pretty well.

You should further try to put as much functionality into Services as possible. This also helps to make your components smaller, easier to reason about and helps testing.

E.g. a functions for check if data treated are correct would be a good example for a service method.

Upvotes: 2

Related Questions