Chapter: Connecting Standalone Components in Angular 20
In this tutorial, we will see how to connect multiple standalone components in Angular 20 using their
selector. This example does not use routing or data passing (@Input()). We’ll demonstrate both inline and external HTML approaches.🎯 Objective
We will create three components:
- AppComponent: The root component
- StudentsComponent: Rendered inside AppComponent
- MarksComponent: Rendered inside StudentsComponent
🛠️ Creating Standalone Components Using Angular CLI
Use the following CLI command to create a standalone component:
ng generate component students --standalone ( here standalone is optional)
ng generate component marks --standalone (here standalone is optional)
This will create components with
standalone: true set in their decorators and automatically generate their CSS, HTML, and spec files.📁 Project Structure
src/
├── app/
│ ├── app.ts
│ ├── students/
│ │ ├── students.component.ts
│ │ ├── students.component.html
│ ├── marks/
│ │ ├── marks.component.ts
│ │ ├── marks.component.html
🔹 1. Without External HTML Files (Inline Templates)
app.ts
import { Component } from '@angular/core';
import { StudentsComponent } from './students/students.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [StudentsComponent],
template: \`
<h1>Student Management App</h1>
<app-students></app-students>
\`
})
export class App {}
students.component.ts
import { Component } from '@angular/core';
import { MarksComponent } from '../marks/marks.component';
@Component({
selector: 'app-students',
standalone: true,
imports: [MarksComponent],
template: \`
<h2>Student List</h2>
<ul><li>Rahul</li><li>Priya</li></ul>
<app-marks></app-marks>
\`
})
export class StudentsComponent {}
marks.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-marks',
standalone: true,
template: \`
<p>Student: Rahul</p>
<p>Marks: 85</p>
\`
})
export class MarksComponent {}
🔹 2. With External HTML Files (templateUrl)
app.ts
import { Component } from '@angular/core';
import { StudentsComponent } from './students/students.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [StudentsComponent],
templateUrl: './app.html'
})
export class App {}
app.html
<h1>Student Management App</h1>
<app-students></app-students>
students.component.ts
import { Component } from '@angular/core';
import { MarksComponent } from '../marks/marks.component';
@Component({
selector: 'app-students',
standalone: true,
imports: [MarksComponent],
templateUrl: './students.component.html'
})
export class StudentsComponent {}
students.component.html
<h2>Student List</h2>
<ul><li>Rahul</li><li>Priya</li></ul>
<app-marks></app-marks>
marks.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-marks',
standalone: true,
templateUrl: './marks.component.html'
})
export class MarksComponent {}
marks.component.html
<p>Student: Rahul</p>
<p>Marks: 85</p>
📌 Summary
We demonstrated how to connect standalone components in Angular 20 using the selector property:
- With CLI: Use
--standaloneflag - Inline templates: Quick for simple examples
- External templates: Better for maintainability
This setup is beginner-friendly and can be extended with @Input() and routing as your project grows.
Next Chapter
In the next lesson, we’ll explore how to pass dynamic data between components using
@Input() and how to emit events with @Output().
