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:

• 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.

In Angular, each component can have its own CSS file. The styles are linked automatically using the styleUrl property in the component metadata.

For example, if you have a file called app.component.css:

• The CSS file is automatically applied to the component’s template.
• You don’t need to manually link the CSS in the HTML.

Let’s add a navigation bar at the top of the page. In Angular, we use the routerLink directive to create navigation links.

• The <nav> element holds our navigation bar.
• The logo is a link that takes users back to the home page using routerLink="/".

The main part of each page will go inside the <main> tag. We use the <router-outlet> directive to display the content of the current route.

• <router-outlet> is a placeholder where the content of the current page will be rendered.
• This allows different pages to appear inside the main layout without duplicating the structure.

Let’s add a footer at the bottom of the page. We can display the current year dynamically using a property in the component and Angular’s interpolation syntax.

First, add a property to the component:

Then, use it in the template:

• {{ currentYear }} will display the current year automatically.

Here’s what the full layout component template looks like:

And the complete component code:

This gives us a solid, reusable structure for all our pages.

In this lesson, you learned how to build a reusable layout component for your Cooking Helper frontend using TypeScript and Angular. We covered the basic component structure, how to include CSS, how to use routing for dynamic content, and how to add a navigation bar and footer. You also saw how to display dynamic data using component properties and interpolation.

Next, you’ll get a chance to practice creating and using this layout in your own project. This will help you get comfortable with components, routing, and building consistent web pages. Let’s get started!