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.

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.