Styling with Angular Components

Welcome back! In the last lesson, you built a reusable layout for your Cooking Helper frontend using Angular and TypeScript. Now, it’s time to make your site look more appealing and organized. This is where TypeScript and Angular components come in.

TypeScript is a powerful language that helps you write safer and more maintainable code. Angular uses TypeScript to let you build structured, reusable components for your application. With Angular components, you can organize your layout, manage navigation, and control how your application looks and behaves. In this lesson, you will learn how to use Angular to structure and style your Cooking Helper frontend, making it more user-friendly and visually attractive.

Before we dive deeper, let’s quickly remind ourselves of what we have so far. In the previous lesson, you created the main app component in Angular. This component includes a navigation bar at the top, a main content area, and a footer at the bottom. You also set up your project so that you can include styles for your components.

Here’s what your layout component might look like in Angular:

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 {
  currentYear: number = new Date().getFullYear();
}

This component organizes your page into clear sections and makes it easy to reuse the layout across different pages.

To style your web page in Angular, you can include styles in two main ways:

• Global styles: These are defined in a file like src/styles.css and apply to your entire application.
• Component styles: Each Angular component can have its own styles, defined in a separate file (e.g., layout.component.css) or directly in the component’s decorator.

Angular automatically loads these styles for you, so you don’t need to worry about linking files manually. Just make sure your styles are in the right place, and Angular will handle the rest.