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

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

📝 Day 1 Exercise

Build a Task Manager

Generate a new Angular project with the CLI.
Generate a tasks component with ng g c tasks.
Add a tasks array and newTask string to the component class.
Build the template: input + button to add tasks, *ngFor to list them.
Add a delete button per task using (click) event binding.
Add a checkbox per task and use *ngIf to show a 'All done!' message when all are checked.

Day 1 Summary

ng new and ng generate component are your primary CLI commands.
{{ }} for interpolation, [prop] for property binding, (event) for event binding.
[(ngModel)] = two-way binding. Requires FormsModule in your module.
*ngIf and *ngFor are structural directives — they change the DOM structure.

Day 2: Services and Dependency Injection

→