Building a Layout Component

Welcome to the first lesson of our Cooking Helper frontend course! In this lesson, we will focus on building the main layout component for our project using TypeScript and a modern frontend framework. This layout will serve as the foundation for every page in our Cooking Helper application. By creating a reusable layout, we ensure that all our pages look consistent and are easier to manage. This is a common practice in web development, and it will help us save time as our project grows.

Before we dive in, let’s quickly introduce how modern frontend frameworks like Angular organize code. Instead of using template files and inheritance, we build our UI using components. Each component has its own template (HTML), logic (TypeScript), and styles (CSS). Components can be reused and combined to build complex layouts.

The main layout is typically defined in a root component (for example, AppComponent in Angular). This component contains the shared structure for your application, such as the header, navigation bar, and footer. Other pages are displayed inside this layout using a special placeholder called a router outlet.

A layout component acts as the base structure for your application. Think of it as a master design that all other pages will use. Instead of copying the same header, navigation bar, and footer into every page, we put them in the layout component once. Then, each page is rendered inside a designated area of this layout.

This is possible thanks to the component and routing system. The layout component contains a router outlet (or a similar mechanism), which displays the content of the current page. This approach keeps your code organized and your UI consistent.

Let’s build our main layout component step by step so you can see how each part works.

In Angular, the main layout is defined in a component, such as AppComponent. This component has a TypeScript file (app.component.ts), an HTML template (app.component.html), and a CSS file (app.component.css).

Here’s what the basic structure looks like:

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
}

• The @Component decorator defines the component’s selector, template, and styles.
• The imports array allows us to use routing features like routerLink and router-outlet in the template.
• The AppComponent class can hold any logic or data needed for the layout.