**Rendering and Routing in Angular 19 – A Developer’s Guide**
Angular 19 is a powerful front-end framework for building single-page applications (SPAs). Two foundational concepts in any Angular app are Rendering and Routing. This article will guide you through how Angular renders components and manages navigation through its built-in router.
Prerequisites

**Ensure you have:**

Node.js >= 18
Angular CLI v19
Basic understanding of TypeScript and HTML

**Install Angular CLI (if not installed):**
npm install -g @angular/cli

**Create a New Angular Project:**

ng new angular-routing-demo
cd angular-routing-demo

**Rendering in Angular 19**
What is Rendering?

Rendering is how Angular turns your component's template and logic into visible HTML elements in the browser. Angular uses a component-based architecture — each component defines:

A template (.html)

A class (.ts)

Styles (.css/.scss)

**Example: Basic Component Rendering**

ng generate component home
or ng g c home

**lets check our component**

**home.component.ts**

**home.component.html**


**Rendering in App:**

Include the component in app.component.html:

<app-home></app-home>

You now have your first rendered Angular component!
You can render various components that you would want to appear here ex, you can render your footer component here and it will be rendered across various pages existent in your application.

**Routing in Angular 19**
**What is Routing?**

Routing allows navigation between different views (components) in a Single Page Application (SPA) without reloading the page.

Angular Router maps URL paths to components using the RouterModule.

**Enable Routing in App**

Make sure your project was created with routing (ng new app-name --routing). If not, add it manually.
2. **Define Components for Routes**
ng generate component about
ng generate component contact

**Configure Routes**
Edit app.routes.ts

**Use router-outlet in AppComponent**
**app.component.ts**

You can create an individual Component eg Navbar and give a Routerlink to redirect users to different pages
In your Navbar.component.html, you can do this;
This sets up a working navigation and rendering system in Angular 19 using standalone components.

**Conclusion**
Angular 19 makes apps leaner and faster. With simplified rendering using standalone components and routing via app.routes.ts, developers can build modern SPAs with minimal boilerplate.