Creating a new Angular project - Try It Yourself

Creating a new Angular project

📖 Scenario: You want to start a new web app using Angular. This app will show a simple welcome message on the page.

🎯 Goal: Create a new Angular project with a basic component that displays a welcome message.

📋 What You'll Learn

Create a new Angular standalone component called AppComponent.

Add a title variable with the value 'Welcome to Angular!'.

Use the @Component decorator with selector, template, and standalone: true.

Bootstrap the AppComponent in main.ts using bootstrapApplication.

💡 Why This Matters

🌍 Real World

Starting a new Angular project is the first step to building modern web apps with reusable components and reactive UI.

💼 Career

Knowing how to set up and bootstrap Angular projects is essential for frontend developer roles using Angular framework.

1

Create the AppComponent with a title variable

Create a standalone Angular component called AppComponent. Inside it, declare a public variable title and set it to 'Welcome to Angular!'.

Angular

// Your code here

Need a hint?

Use @Component decorator with selector, template, and standalone: true. Declare title inside the class.

2

Add a template to display the title

Update the @Component decorator in AppComponent to include a template that shows the title variable inside an <h1> tag using Angular interpolation.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '{{ title }}',
  standalone: true
})
export class AppComponent {
  title = 'Welcome to Angular!';
}

// Your code here

Need a hint?

Use Angular interpolation {{ title }} inside the <h1> tag in the template property.

3

Set up main.ts to bootstrap AppComponent

In main.ts, import bootstrapApplication from @angular/platform-browser and AppComponent. Then call bootstrapApplication(AppComponent) to start the app.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Your code here

Need a hint?

Use bootstrapApplication(AppComponent) to launch the Angular app.

4

Complete the Angular project setup

Ensure AppComponent is exported from app.component.ts and main.ts bootstraps it. This completes the minimal Angular project setup.

Angular

// Your code here

Need a hint?

Check that AppComponent is exported and bootstrapped correctly.