So far, our application has all of its HTML, CSS, and business logic as part of the AppComponent class. Although we have already broken this class down into separate app.component.html and app.component.css files, it really contains a number of separate components all in one. Let's take this opportunity to modularize our code, and create three separate classes. These three separate classes will be, as follows:
- A NavbarComponent class to render and handle the navigation bar at the top of the screen.
- A SideNavComponent class to render the left-hand side navigation panel.
- A RightScreenComponent to handle the detail panel that slides in from the right.
This means that the AppComponent class becomes the central application class, and it will be responsible for coordinating each of these components.