Day 1: Components, Templates, and TypeScript | Angular in 5 Days

Today's Objective

Generate a component with the CLI — it creates all four files and registers it automatically:

Creating an Angular Project

Angular uses its own CLI to scaffold projects. Every Angular project is TypeScript-first by design — you get type checking, autocomplete, and refactoring tools out of the box.

Terminal

npm install -g @angular/cli
ng new my-app --routing --style=css
cd my-app
ng serve

Open http://localhost:4200. The project structure has a clear separation of concerns:

Project Structure

src/
├── app/
│   ├── app.component.ts    ← root component
│   ├── app.component.html  ← root template
│   ├── app.module.ts       ← root module
│   └── app-routing.module.ts
└── main.ts

Your First Component

Generate a component with the CLI — it creates all four files and registers it automatically:

Terminal

ng generate component greeting
# or shorthand:
ng g c greeting

greeting.component.ts

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

@Component({
  selector: 'app-greeting',      // used as  in templates
  templateUrl: './greeting.component.html',
  styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
  title = 'Hello, Angular';
  name = '';
  items: string[] = ['Apples', 'Bananas', 'Cherries'];

  addItem(item: string) {
    this.items.push(item);
  }
}

greeting.component.html


{{ title }}



Hello, {{ name }}!


Name is set!



  {{ item }}

💡

ngModel requires FormsModule. Add FormsModule to your app.module.ts imports array. Forgetting this is the #1 Angular beginner mistake.

Property and Event Binding

TypeScript

// In the component class:
disabled = true;
imageUrl = 'https://example.com/img.png';
onClick() { console.log('clicked'); }

Template

→

Components, Templates, and TypeScript

Today's Objective

Creating an Angular Project

Your First Component

{{ title }}

Property and Event Binding

Supporting References & Reading

Go deeper with these external resources.

Day 1 Checkpoint