How to refine the structure of the code ?

[manishbjain]

Hello,

I want to refine the structure of the code as I feel its too cluttered which will create difficulty for me in the long run considering a big app that I am trying to build.

At the moment everything is placed in the app component . I would want the app component to be as simple as possible and want the sidebar component to place in app.component.html . Precisely , something like this -

submenu --> nav-menu (main menu) -->sidebar-->app-component

I am confused as to what code to keep in the app component thats meant for the entire layout and what to remove (to separate sidebar component that will have the menu)

And also I want to keep the templates in html files instead of keeping it in the same ts files.

Also, Is there a way to keep the animations off all the files and keep one common service file for the entire module.

[cagatay.civici]

- And also I want to keep the templates in html files instead of keeping it in the same ts files.
Sure you can do this using the templateUrl option of Angular.

- Also, Is there a way to keep the animations off all the files and keep one common service file for the entire module.
If you import NoOpAnimations module from Angular, it will disable animations of components, also in global variables file there is a transitionDuration variable, setting it to 0 will disable layout animations.

- I am confused as to what code to keep in the app component thats meant for the entire layout and what to remove (to separate sidebar component that will have the menu)
Not sure what you mean, topbar, menu and right panel are all separate components.