[MAINTENANCE] Extract html out of angular components

[bcox280]

Description The current component setup is not particularly easy to develop with.

Typescript components have templates attached to them which contain the html that will be displayed for that specific component. This is fine when the html is small, but in cases like in header.component.ts, it makes navigation of the file more difficult. The component and html code should be separated into different files, for both readability and also to maintain a separation of concerns.

In the future, if we ever remove inline styling and have dedicated styling for each component, we will end up having even more code in each component. So if we force html to be in a different file now, then when css styling per component is added, our convention will enforce that the styling should be put into a separate file.

Acceptance criteria

• Majority/All Angular components have their template extracted into a different file so that each component has a .ts file and a .html file
• No loss in functionality for the application

Pointers / Solutions https://angular.io/guide/quickstart shows the ts file with the templateUrls setup in this way. If the directory for all the components gets too bloated, it might be necessary to also extract each component into its own folder (this is also a typical Angular convention).

[bcox280]

Also, if you have a good idea for a tag that's better than maintenance/refactoring, please let me know :)

[KelseyRM]

Definitely would make the codebase a lot more readable and manageable, approved!

[darcycox97]

Very good call, then we can get actual html syntax highlighting too <3. Approved

[rmberriman]

Approved - would make the code much easier to read!