We configured the project with TypeScript compiler options. Now, let's add an Angular root component for our application. Follow these steps to do so:
- First, create an app folder under wwwroot by right-clicking on it and navigate to Add | New Folder, as shown in the following screenshot:
Adding a new folder named app for the Angular application folder
- We have the app folder ready. Let's add the TypeScript file to create a root component by right-clicking on the app folder and navigating to Add | New Item. Select Scripts under Web from the left-hand side pane and select TypeScript File from the middle pane. Name the file as the app.component.ts file and click on Add:
Adding a root component named app.component.ts
- Add the following code snippet to app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'My Todo App';
}
A root component named AppComponent is created and decorated with the component metadata selector and templateUrl.