When you create an Angular project, you’re greeted with a default template. Cleaning up the main template means removing the default content from the app.component.html file. It’s like clearing a blank canvas before painting a new picture.

Replace the default content in the app.component.html file with the following code snippet to create a fresh starting point for your Angular project.

app.component.html

<header>
  <h1>Welcome to My Angular App</h1>
  <nav>
    <a [routerLink]="'/'">Home</a>
    <a [routerLink]="'/about'">About</a>
    <!-- Add additional navigation links as needed -->
  </nav>
</header>

<!-- Main Content Section -->
<main>
  <router-outlet></router-outlet>
  <!-- This router-outlet will render the appropriate component based on the current route -->
</main>

<!-- Footer Section -->
<footer>
  <p>&copy; 2024 My Angular App. All rights reserved.</p>
</footer>

This code sets up a basic structure for your Angular application, including a header with navigation links, a main content section with a router outlet for dynamic content, and a footer with a copyright notice. You can now customize and expand upon this template to build your application according to your requirements.

If you are using routerLink directives in the component’s template, don’t forget to update app.component.ts. You need to import RouterLink.

app.component.ts

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

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

Conclusion

Removing the default content in the app.component.html file creates a fresh starting point for your Angular project. This allows you to start building an application’s user interface from scratch according to your requirements.