As web developers, and unless you're privileged to have a web designer on your team, we necessarily find ourselves needing to spend time with the layout of the components on our pages.
As a quick aside, let's put some terminology in place for our discussions moving forward. I've used the terms component and pages interchangeably in the first few chapters, but it is now time to get more precise. As you know, Angular applications are SPAs by default and thus only have one page. I've mentioned a few times in the book that an Angular application is like a tree of components, and it all starts with the root component. Components are composable, which is to say that a component can be made of other components. What's the result of this? Well, we need a web page in order to have our root component rendered—and from that moment forth, our root component brings in other components, which, in turn, bring in yet other components. The end result is that our components recursively render themselves to give the illusion that we have multiple pages. Of course, we don't have multiple pages. We have a single web page, and the way in which we're architecting our application is that we have a main encompassing component for each page in our application. All that means is that when you see me mention page, instead of component, I'm really referring to the main component on that page.
Take a look back at the code we wrote for Chapter 4, Routing, and it should all start to be making sense to you. Specifically, a given URL maps to a component. With more traditional web applications that are not SPAs, the URLs are mapped to views, or "pages". OK, let's return our focus to considerations and available options as to layout strategies.
Laying out the components in our application includes the following four necessities:
- Laying out our components within their containers (that is, parent component and child component(s))
- Sizing our components
- Positioning our components relative to each other
- Styling the components
I don't profess to be an expert in styling or CSS. I can barely color coordinate the clothes I wear. While we have seen some CSS in Chapter 3, Bootstrap – Grid Layout and Components, in our SASS crash course (and we'll certainly see more CSS in the chapters ahead), this is not a book about design and styling. Packt Publishing offers a few excellent books on CSS. In this chapter, we'll only concern ourselves with laying out our components within their containers. To that end, we have four techniques that we can choose from: tables, float and clear, FlexBox CSS, and CSS Grid.
Yes, of course, Flex-Layout is also an option for us because we've chosen Angular (big smile). However, the four layout techniques I've listed apply to web development in general—regardless of a frontend framework, library, or just plain old HTML and CSS. As we have seen in Chapter 3, Bootstrap – Grid Layout and Components, Bootstrap is a CSS framework built on top of FlexBox CSS, and so also applies to web development in general.
Getting back to our discussion of layout techniques, let's contrast the four that are generally available to web developers, and see whether there is a clear winner. From there, we'll move on to the nitty-gritty of this chapter and take a look at what Flex-Layout is and why we should use it.