Creating the layout of the website

Once we have the initial idea for our website, it becomes relatively straightforward to transform those sections into Angular components. Let’s have a look at the following transformation:

Figure 14.4 – Breaking down sections into Angular components

As depicted in the figure, each section is distinct and can be readily mapped to an Angular component. For instance, the header section can be assigned to header.component.ts. By following this approach, we can establish the following code structure as an illustrative example:

// app.component.ts
<primebook-header />
<primebook-hero />
<primebook-features />
<primebook-testimonials />
<primebook-footer />

Each selector represents the corresponding section in our sketch or design.

It’s pretty simple to get started to create those components by running the following command:

primengbook$ ng g c header --inline-template...