Making Components in Angular: Level 0 to Infinity

1. Introduction to Angular Components

A component is the basic visual building block of an Angular application. A complete Angular app is not usually one giant page. It is a tree of small components: header, footer, cards, lists, forms, pages, dashboards, and dialogs.

CopyAngular App
├── Header Component
├── Home Page Component
│   ├── Course Card Component
│   └── Testimonial Component
└── Footer Component

2. Component Mental Model

Think of a component as a small machine. It receives data, displays data, reacts to events, and may send data back to another component.

3. Generate Your First Component

The safest way to create a component is through Angular CLI. The CLI creates the TypeScript, HTML, CSS, and test files in the correct structure.

Command

Copyng generate component components/course-card

Short Form

Copyng g c components/course-card

Expected Files

Copysrc/app/components/course-card/
├── course-card.ts
├── course-card.html
├── course-card.css
└── course-card.spec.ts

4. Anatomy of a Component

A component is a TypeScript class decorated with @Component. The decorator tells Angular how to use that class as a visual component.

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

@Component({
  selector: 'app-course-card',
  templateUrl: './course-card.html',
  styleUrl: './course-card.css'
})
export class CourseCard {
  title = 'Angular Components';
  level = 'Beginner';
}

5. Display a Component on the Page

To show a component, place its selector in another component's template. In standalone Angular, also import the child component in the parent component.

course-card.html

Copy<article class="course-card">
  <h3>{{ title }}</h3>
  <p>Level: {{ level }}</p>
</article>

app.ts or parent component

Copyimport { Component } from '@angular/core';
import { CourseCard } from './components/course-card/course-card';

@Component({
  selector: 'app-root',
  imports: [CourseCard],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {}

app.html

Copy<h1>Angular Component Practice</h1>

<app-course-card></app-course-card>

6. Component Styling

Component CSS is normally scoped to that component. This helps avoid accidental style collisions.

course-card.css

Copy.course-card {
  max-width: 360px;
  padding: 18px;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  background: #fff7ed;
}

.course-card h3 {
  color: #92400e;
  margin-top: 0;
}

7. Data and Methods Inside Components

Component properties hold data. Component methods respond to user actions.

course-card.ts

Copyexport class CourseCard {
  title = 'Angular Components';
  enrolled = false;

  enroll(): void {
    this.enrolled = true;
  }
}

course-card.html

Copy<article class="course-card">
  <h3>{{ title }}</h3>

  @if (enrolled) {
    <p>You are enrolled.</p>
  } @else {
    <button (click)="enroll()">Enroll</button>
  }
</article>

8. Components with Signals

A signal is reactive state. When a signal changes, Angular can update the places where that signal is used.

course-card.ts

Copyimport { Component, signal } from '@angular/core';

@Component({
  selector: 'app-course-card',
  templateUrl: './course-card.html',
  styleUrl: './course-card.css'
})
export class CourseCard {
  likes = signal(0);

  like(): void {
    this.likes.update(value => value + 1);
  }
}

course-card.html

Copy<p>Likes: {{ likes() }}</p>

<button (click)="like()">
  Like
</button>

9. Parent to Child Data with input()

A parent component can send data into a child component. Modern Angular supports the input() function for declaring component inputs.

course-card.ts

Copyimport { Component, input } from '@angular/core';

@Component({
  selector: 'app-course-card',
  templateUrl: './course-card.html',
  styleUrl: './course-card.css'
})
export class CourseCard {
  title = input.required<string>();
  level = input('Beginner');
}

course-card.html

Copy<article class="course-card">
  <h3>{{ title() }}</h3>
  <p>Level: {{ level() }}</p>
</article>

parent template

Copy<app-course-card
  title="Angular Components"
  level="Level 0 to Infinity">
</app-course-card>

10. Child to Parent Events with output()

A child component can send an event to its parent. Modern Angular uses the output() function for custom events.

course-card.ts

Copyimport { Component, input, output } from '@angular/core';

@Component({
  selector: 'app-course-card',
  templateUrl: './course-card.html',
  styleUrl: './course-card.css'
})
export class CourseCard {
  title = input.required<string>();
  selected = output<string>();

  selectCourse(): void {
    this.selected.emit(this.title());
  }
}

course-card.html

Copy<button (click)="selectCourse()">
  Select Course
</button>

parent template

Copy<app-course-card
  title="Angular Components"
  (selected)="onCourseSelected($event)">
</app-course-card>

parent TypeScript

Copymessage = '';

onCourseSelected(courseTitle: string): void {
  this.message = `Selected: ${courseTitle}`;
}

11. Two-way Component Binding with model()

A custom child component can support two-way binding using model(). This is useful for reusable controls like rating boxes, counters, filters, and toggles.

rating-box.ts

Copyimport { Component, model } from '@angular/core';

@Component({
  selector: 'app-rating-box',
  template: `
    <p>Rating: {{ rating() }}</p>
    <button (click)="increase()">+</button>
  `
})
export class RatingBox {
  rating = model(0);

  increase(): void {
    this.rating.update(value => value + 1);
  }
}

parent template

Copy<app-rating-box [(rating)]="courseRating"></app-rating-box>

<p>Parent Rating: {{ courseRating }}</p>

12. Content Projection with ng-content

Content projection lets a parent put custom content inside a child component. This is useful for reusable cards, panels, modals, and layouts.

panel.html

Copy<section class="panel">
  <header>
    <ng-content select="[panel-title]"></ng-content>
  </header>

  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</section>

parent template

Copy<app-panel>
  <h2 panel-title>Angular Course</h2>
  <p>This paragraph is projected into the panel body.</p>
</app-panel>

13. Component Lifecycle

A component has a lifecycle: Angular creates it, initializes inputs, checks changes, renders it, and finally destroys it when it is no longer needed.

Example

Copyimport { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-timer-box',
  template: '<p>Timer running</p>'
})
export class TimerBox implements OnInit, OnDestroy {
  private timerId = 0;

  ngOnInit(): void {
    this.timerId = window.setInterval(() => {
      console.log('tick');
    }, 1000);
  }

  ngOnDestroy(): void {
    window.clearInterval(this.timerId);
  }
}

14. Referencing Child Elements with viewChild()

Sometimes a component needs a reference to an element or child component in its own template. Angular supports view queries for this.

Example

Copyimport { Component, ElementRef, viewChild } from '@angular/core';

@Component({
  selector: 'app-focus-box',
  template: `
    <input #nameInput placeholder="Name">
    <button (click)="focusName()">Focus Input</button>
  `
})
export class FocusBox {
  nameInput = viewChild.required<ElementRef<HTMLInputElement>>('nameInput');

  focusName(): void {
    this.nameInput().nativeElement.focus();
  }
}

15. Page Components vs Reusable Components

A clean Angular app separates route-level page components from smaller reusable UI components.

Recommended Structure

Copysrc/app/
├── pages/
│   ├── home/
│   └── courses/
├── components/
│   ├── header/
│   ├── footer/
│   └── course-card/
└── services/
    └── course.service.ts

16. Dynamic Component Rendering

Most components are used directly in templates. Advanced apps can render components dynamically. This is useful for dashboards, plugin-style UIs, modals, or switching between component types.

Using NgComponentOutlet

Copyimport { Component } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';
import { AdminCard } from './admin-card/admin-card';
import { StudentCard } from './student-card/student-card';

@Component({
  selector: 'app-dynamic-demo',
  imports: [NgComponentOutlet],
  template: `
    <button (click)="useAdmin()">Admin</button>
    <button (click)="useStudent()">Student</button>

    <ng-container *ngComponentOutlet="selectedComponent"></ng-container>
  `
})
export class DynamicDemo {
  selectedComponent = StudentCard;

  useAdmin(): void {
    this.selectedComponent = AdminCard;
  }

  useStudent(): void {
    this.selectedComponent = StudentCard;
  }
}

17. Testing Components

Component tests verify that the component can be created and that important behavior works.

Basic Test Shape

Copyimport { ComponentFixture, TestBed } from '@angular/core/testing';
import { CourseCard } from './course-card';

describe('CourseCard', () => {
  let component: CourseCard;
  let fixture: ComponentFixture<CourseCard>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CourseCard]
    }).compileComponents();

    fixture = TestBed.createComponent(CourseCard);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Run Tests

Copyng test

18. Deployment Check for Components

After making components, build and deploy the full Angular app. Your custom domain is:

Copyhttps://angular.learnwithchampak.live/

Build

Copynpm run build:github

Deploy

Copynpm run deploy:github

19. Common Component Mistakes

20. Student Assignment

Build a small component-based Angular page for a course website.

Create Components

Copyng g c components/site-header
ng g c components/site-footer
ng g c components/course-card
ng g c components/rating-box
ng g c pages/components-practice

Requirements

Copy1. Show SiteHeader at the top.
2. Show three CourseCard components.
3. Pass course title using input().
4. Send selected course back to parent using output().
5. Add RatingBox using model().
6. Use component CSS for card design.
7. Add one ng-content based reusable panel.
8. Build successfully.
9. Deploy to angular.learnwithchampak.live.

Final Test

Copyng serve

Open:

Copyhttp://localhost:4200

Final Summary