Angular 8 🅰️ Structural Directives — ngIf, ngFor, ngSwitch - KandZ

Structural directives change the shape of the DOM — they add, remove, or replace elements based on data. The three built-in ones are *ngIf (conditionally include), *ngFor (repeat for each item), and *ngSwitch (pick one of several branches). They’re called “structural” because they don’t just style an element — they decide whether it exists at all. This chapter covers the legacy directive syntax; the modern @if/@for/@switch block syntax is covered in the next chapter and is what you should use in new Angular code.

Key point: Structural directives are sugar for <ng-template>. The asterisk (*) tells Angular to wrap the host element in a template and let the directive decide when to stamp it out. Understanding that expansion is the key to understanding everything else — *ngIf, *ngFor, *ngSwitch, and custom structural directives.

What “structural” means

A structural directive changes the DOM’s structure — it adds, removes, or replaces elements. Contrast this with an attribute directive (next chapter) that only changes an existing element’s appearance or behavior.

*ngIf="condition"     → add or remove
*ngFor="let x of xs"  → repeat
*ngSwitch             → pick one

The asterisk prefix is the giveaway. Any directive used with * is structural — it wraps the host element in a template and controls whether that template is rendered.

Without a structural directive, the element is always in the DOM. With one, the element may be absent entirely — not hidden with CSS, not display: none, actually removed.

Why this matters: *ngIf removes elements from the DOM. That means their components are destroyed, their ngOnDestroy runs, their subscriptions are torn down. That’s different from hiding with [hidden] or [style.display]="'none'" — which keeps the element alive but invisible. Choosing the right one has real consequences for performance and lifecycle.

The asterisk and `<ng-template>`

The * in *ngIf is shorthand. Angular rewrites it before compiling.

You write:

<div *ngIf="isVisible">Hello</div>

Angular expands it to:

<ng-template [ngIf]="isVisible">
  <div>Hello</div>
</ng-template>

<ng-template> is an inert element — it renders nothing by itself. It’s a placeholder that holds content until something decides to stamp it out. The ngIf directive lives on the template, not on the <div>. When isVisible is true, the template is rendered; when false, it’s removed.

Why this matters:

The <div> isn’t a child of <ng-template> in the rendered DOM — <ng-template> is a placeholder, not a wrapper
You can’t put *ngIf and *ngFor on the same element — Angular can’t expand two asterisks into one <ng-template>. Use a wrapper <ng-template> or nest the elements
You can write <ng-template> explicitly when you need to (we’ll see this later)

Every structural directive works this way. *ngFor and *ngSwitch expand the same way.

Why <ng-template> exists: Angular needs a way to hold content that may or may not be rendered. <ng-template> is that container — invisible, inert, waiting for a directive to decide.

`*ngIf` — conditional rendering

*ngIf includes or excludes an element based on a boolean expression.

export class UserComponent {
  user: { name: string } | null = null;
  isLoggedIn = false;

  login(): void {
    this.user = { name: 'Alice' };
    this.isLoggedIn = true;
  }
}

<div *ngIf="isLoggedIn">
  Welcome back, {{ user?.name }}!
</div>

<button *ngIf="!isLoggedIn" (click)="login()">Log in</button>

When isLoggedIn is true, the welcome div renders and the button doesn’t. When it’s false, the reverse. Toggling isLoggedIn adds or removes the elements from the DOM.

Truthy/falsy: Any truthy value includes the element; any falsy value (false, 0, '', null, undefined, NaN) excludes it. *ngIf="items.length" works — an empty array has length 0, so the element is hidden.

*ngIf with else:

<div *ngIf="user; else noUser">
  Hello, {{ user.name }}
</div>

<ng-template #noUser>
  <p>No user found.</p>
</ng-template>

The else clause points to a template reference variable (#noUser). When user is falsy, that template renders instead.

*ngIf with then:

<ng-template [ngIf]="user" [ngIfElse]="noUser">
  <!-- this becomes the "then" content -->
</ng-template>

<ng-template #noUser>
  <p>No user found.</p>
</ng-template>

The then clause is rarely used — the standard *ngIf="cond; else tpl" form is clearer.

*ngIf as a variable:

<div *ngIf="user as u">
  Hello, {{ u.name }}
</div>

The as clause binds the truthy value to a template variable. Useful for narrowing User | null to User without repeated ?. — inside the block, u is a User.

Why else uses a template reference: Angular needs a target for the “otherwise” content. A <ng-template #name> block is that target. It’s explicit, so there’s no ambiguity about what renders when.

`*ngFor` — repeating elements

*ngFor renders a template once per item in a collection.

export class ListComponent {
  users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Carol' }
  ];
}

<ul>
  <li *ngFor="let user of users">
    {{ user.name }}
  </li>
</ul>

For each user, Angular stamps out an <li>. The result:

<ul>
  <li>Alice</li>
  <li>Bob</li>
  <li>Carol</li>
</ul>

Local variables inside the loop:

<li *ngFor="let user of users; let i = index; let first = first; let last = last; let odd = odd; let even = even">
  {{ i }}: {{ user.name }} {{ first ? '(first)' : '' }} {{ last ? '(last)' : '' }}
</li>

Variable	Meaning
`index`	Zero-based position
`count`	Total number of items
`first`	`true` on the first item
`last`	`true` on the last item
`odd`	`true` on odd indices
`even`	`true` on even indices

With trackBy:

<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

trackById(index: number, user: { id: number }): number {
  return user.id;
}

Without trackBy, Angular identifies items by object reference. When the array is replaced with new objects that have the same IDs, Angular destroys and recreates every DOM node. With trackBy, Angular matches by ID and only updates what changed.

When to use trackBy: Whenever your list can be refreshed with new object instances that represent the same entities. Fetching the same list twice from an API produces new objects — without trackBy, every <li> is destroyed and rebuilt.

*ngFor without trackBy is fine for static lists that never change. For dynamic lists, always add it.

Why trackBy matters: Angular’s default identity check compares references. New objects fail the check even if they’re logically the same. trackBy gives Angular a stable key so it can reuse DOM nodes. That’s the difference between a smooth update and a full re-render.

`*ngSwitch` — picking one branch

*ngSwitch renders exactly one of several templates based on a value.

export class StatusComponent {
  status: 'loading' | 'success' | 'error' = 'loading';
}

<div [ngSwitch]="status">
  <p *ngSwitchCase="'loading'">Loading...</p>
  <p *ngSwitchCase="'success'">Done!</p>
  <p *ngSwitchCase="'error'">Something went wrong.</p>
  <p *ngSwitchDefault>Unknown status.</p>
</div>

Notice the asymmetry: [ngSwitch] is a property binding (square brackets) on the container, while *ngSwitchCase and *ngSwitchDefault are structural (asterisks) on the branches.

Only one branch renders. *ngSwitchDefault catches anything unmatched.

*ngSwitchCase supports multiple values:

<p *ngSwitchCase="'error'">Error!</p>
<p *ngSwitchCase="'warning'">Warning!</p>

Each case has exactly one value. To match multiple, duplicate the element or use [ngSwitchCase] with a comma-separated expression via a method.

When to use *ngSwitch vs *ngIf:

*ngIf — two branches (include or exclude)
*ngIf chains — three or four mutually exclusive branches
*ngSwitch — five or more mutually exclusive branches, or when a single value drives the choice

*ngSwitch is clearer when one value picks one of many. *ngIf/else chains become noisy beyond three options.

Why [ngSwitch] uses brackets: The container binding is a plain property binding to the ngSwitch directive’s ngSwitch input. The cases are structural because each conditionally includes its element. Different roles, different syntax.

Nesting and combining

You can nest structural directives freely.

<div *ngIf="users.length">
  <h2>Users</h2>
  <ul>
    <li *ngFor="let user of users">{{ user.name }}</li>
  </ul>
</div>

The outer *ngIf decides whether the list is shown. The inner *ngFor repeats for each user. Both work independently.

What you can’t do — put two structural directives on the same element:

<div *ngIf="cond" *ngFor="let x of xs">...</div>  <!-- ❌ -->

Angular can’t expand two asterisks into one <ng-template>. To achieve this, wrap one in an <ng-template> or restructure:

<ng-template ngFor let-x [ngForOf]="xs">
  <div *ngIf="cond">{{ x }}</div>
</ng-template>

Or, more commonly:

<ng-container *ngIf="cond">
  <div *ngFor="let x of xs">{{ x }}</div>
</ng-container>

<ng-container> is a special element that renders nothing — it exists only to group content. Use it when you need a structural directive without adding a wrapper element to the DOM.

Why <ng-container>: Sometimes you need to apply a structural directive but don’t want to add an extra <div> to the DOM. <ng-container> is invisible in the rendered output — it just holds the directive.

A full example

A small user list that uses all three directives.

The class:

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

interface User {
  id: number;
  name: string;
  active: boolean;
}

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.css'
})
export class UserListComponent {
  loading = false;
  error: string | null = null;

  users: User[] = [
    { id: 1, name: 'Alice', active: true },
    { id: 2, name: 'Bob', active: false },
    { id: 3, name: 'Carol', active: true }
  ];

  trackById(_: number, user: User): number {
    return user.id;
  }
}

The template:

<div [ngSwitch]="true">
  <p *ngSwitchCase="loading">Loading...</p>
  <p *ngSwitchCase="!!error">Error: {{ error }}</p>
  <p *ngSwitchDefault>Loaded {{ users.length }} users.</p>
</div>

<ul *ngIf="users.length; else empty">
  <li *ngFor="let user of users; let i = index; trackBy: trackById"
      [class.inactive]="!user.active">
    {{ i + 1 }}. {{ user.name }}
    <span *ngIf="!user.active">(inactive)</span>
  </li>
</ul>

<ng-template #empty>
  <p>No users.</p>
</ng-template>

The styles:

.inactive {
  color: gray;
}

The status block uses *ngSwitch to show one of three states. The list uses *ngIf with an else template, and *ngFor with index and trackBy. Each inactive user gets an inline “(inactive)” span via a nested *ngIf.

Why this shape: Each directive does one job. *ngSwitch for multi-branch status, *ngIf for the list-or-empty choice, *ngFor for the list itself, and another *ngIf for the per-item marker. Nesting is fine — combining on one element isn’t.

Complete Example Session

# ============================================
# PART 1: GENERATE A COMPONENT
# ============================================

ng generate component user-list
# [ CREATE src/app/user-list/user-list.component.ts ]
# [ CREATE src/app/user-list/user-list.component.html ]
# [ CREATE src/app/user-list/user-list.component.css ]

# ============================================
# PART 2: WRITE THE CLASS
# ============================================

cat > src/app/user-list/user-list.component.ts << 'EOF'
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

interface User {
  id: number;
  name: string;
  active: boolean;
}

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.css'
})
export class UserListComponent {
  users: User[] = [
    { id: 1, name: 'Alice', active: true },
    { id: 2, name: 'Bob', active: false },
    { id: 3, name: 'Carol', active: true }
  ];

  trackById(_: number, user: User): number {
    return user.id;
  }
}
EOF

# ============================================
# PART 3: WRITE THE TEMPLATE
# ============================================

cat > src/app/user-list/user-list.component.html << 'EOF'
<h2>Users</h2>

<ul *ngIf="users.length; else empty">
  <li *ngFor="let user of users; let i = index; trackBy: trackById"
      [class.inactive]="!user.active">
    {{ i + 1 }}. {{ user.name }}
  </li>
</ul>

<ng-template #empty>
  <p>No users found.</p>
</ng-template>
EOF

# ============================================
# PART 4: ADD ngSwitch
# ============================================

cat > src/app/status/status.component.ts << 'EOF'
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-status',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div [ngSwitch]="status">
      <p *ngSwitchCase="'loading'">Loading...</p>
      <p *ngSwitchCase="'success'">Done!</p>
      <p *ngSwitchCase="'error'">Something went wrong.</p>
      <p *ngSwitchDefault>Unknown.</p>
    </div>
  `
})
export class StatusComponent {
  status: 'loading' | 'success' | 'error' | 'idle' = 'loading';
}
EOF

# ============================================
# PART 5: SERVE
# ============================================

ng serve
# [ Local:   http://localhost:4200/ ]

Quick Reference

Structural Directives

Directive	Purpose
`*ngIf`	Conditional include/exclude
`*ngFor`	Repeat for each item
`*ngSwitchCase`	One branch of a switch
`*ngSwitchDefault`	Default branch

`*ngIf` Forms

Form	Meaning
`*ngIf="cond"`	Include when truthy
`*ngIf="cond; else tpl"`	Include, else fallback
`*ngIf="val as v"`	Bind truthy value to `v`
`*ngIf="cond; then a; else b"`	Long form

`*ngFor` Local Variables

Variable	Meaning
`index`	Zero-based position
`count`	Total number of items
`first`	First item?
`last`	Last item?
`odd`	Odd index?
`even`	Even index?

`*ngFor` Syntax

Form	Meaning
`let x of xs`	Iterate over `xs`
`trackBy: fn`	Stable identity for updates

`*ngSwitch` Syntax

Form	Role
`[ngSwitch]="value"`	Container binding
`*ngSwitchCase="'x'"`	One case
`*ngSwitchDefault`	Fallback

Comparison

Directive	Use when
`*ngIf`	Two branches
`*ngIf/else`	Two named branches
`*ngSwitch`	Many mutually exclusive branches

Required Imports

Directive	Module
`*ngIf`	`CommonModule`
`*ngFor`	`CommonModule`
`*ngSwitch`	`CommonModule`

Best Practices

✅ Do This:

<!-- Use trackBy on dynamic lists -->
<li *ngFor="let u of users; trackBy: trackById">{{ u.name }}</li>   <!-- ✅ -->

<!-- Use the "as" clause to narrow types -->
<div *ngIf="user as u">Hello, {{ u.name }}</div>                    <!-- ✅ -->

<!-- Use else with a template reference -->
<div *ngIf="user; else noUser">...</div>                            <!-- ✅ -->

<!-- Use ng-container to group without extra DOM -->
<ng-container *ngIf="cond">...</ng-container>                       <!-- ✅ -->

<!-- Use ngSwitch for many exclusive branches -->
<div [ngSwitch]="status">...</div>                                  <!-- ✅ -->

<!-- Nest structural directives -->
<div *ngIf="list.length"><li *ngFor="let x of list">...</li></div>  <!-- ✅ -->

<!-- Import CommonModule where needed -->
imports: [CommonModule]                                             <!-- ✅ -->

❌ Don’t Do This:

<!-- Don't put two structural directives on one element -->
<div *ngIf="c" *ngFor="let x of xs">...</div>                       <!-- ❌ -->

<!-- Don't use *ngIf for hiding — use [hidden] if you want to keep it alive -->
<div *ngIf="hidden" [hidden]="true">...</div>                       <!-- ⚠️ pick one -->

<!-- Don't forget trackBy on dynamic lists -->
<li *ngFor="let u of users">{{ u.name }}</li>                       <!-- ⚠️ slow on refresh -->

<!-- Don't use ngSwitch with two branches -->
<div [ngSwitch]="x"><p *ngSwitchCase="'a'">A</p><p *ngSwitchDefault>B</p></div>  <!-- ⚠️ use ngIf -->

<!-- Don't use *ngIf="cond === true" -->
<div *ngIf="cond === true">...</div>                                <!-- ⚠️ just *ngIf="cond" -->

<!-- Don't use ngIf for CSS-only show/hide -->
<div *ngIf="visible" [style.display]="'none'">...</div>             <!-- ❌ contradictory -->

Common Pitfalls

Pitfall	Problem	Solution
Two `*` on one element	Angular error	Use `<ng-container>`
No `trackBy` on dynamic list	Full re-render	Add `trackBy`
Using `*ngIf` to hide	Component destroyed	Use `[hidden]` if you need it alive
Forgetting `CommonModule`	Directives not found	Import it
`*ngIf="value === true"`	Redundant comparison	Just `*ngIf="value"`
`*ngSwitchCase` without container	Case never matches	Wrap in `[ngSwitch]`
Nested loops with same variable	Shadowing	Rename or use `index`
`*ngFor` over non-array	Runtime error	Ensure iterable

Real-World Examples

1. Show a welcome block

<div *ngIf="isLoggedIn">Welcome back!</div>

2. Show a fallback

<div *ngIf="user; else noUser">Hello, {{ user.name }}</div>
<ng-template #noUser>No user.</ng-template>

3. Use `as` to narrow

<div *ngIf="user as u">{{ u.name }} — {{ u.email }}</div>

4. Basic list

<li *ngFor="let item of items">{{ item }}</li>

5. List with index

<li *ngFor="let item of items; let i = index">{{ i + 1 }}. {{ item }}</li>

6. List with trackBy

<li *ngFor="let user of users; trackBy: trackById">{{ user.name }}</li>

7. List with first/last markers

<li *ngFor="let x of xs; let first = first; let last = last">
  {{ x }}{{ first ? ' (first)' : '' }}{{ last ? ' (last)' : '' }}
</li>

8. Switch on a status

<div [ngSwitch]="status">
  <p *ngSwitchCase="'loading'">Loading...</p>
  <p *ngSwitchCase="'done'">Done!</p>
  <p *ngSwitchDefault>Unknown.</p>
</div>

9. Switch inside a loop

<div *ngFor="let item of items" [ngSwitch]="item.type">
  <span *ngSwitchCase="'text'">{{ item.value }}</span>
  <span *ngSwitchCase="'number'">{{ item.value | number }}</span>
  <span *ngSwitchDefault>?</span>
</div>

10. Group with ng-container

<ng-container *ngIf="items.length">
  <h2>Items</h2>
  <ul><li *ngFor="let i of items">{{ i }}</li></ul>
</ng-container>

11. Empty state

<ul *ngIf="users.length; else empty">
  <li *ngFor="let u of users">{{ u.name }}</li>
</ul>
<ng-template #empty><p>No users found.</p></ng-template>

12. Loading state

<p *ngIf="loading">Loading...</p>
<ul *ngIf="!loading && items.length">
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

13. Per-item condition

<li *ngFor="let user of users">
  {{ user.name }}
  <span *ngIf="user.admin">(admin)</span>
</li>

14. Conditional wrapper

<ng-container *ngIf="editable; else viewMode">
  <input [(ngModel)]="value">
</ng-container>
<ng-template #viewMode>
  <p>{{ value }}</p>
</ng-template>

15. Nested loops

<div *ngFor="let group of groups">
  <h3>{{ group.name }}</h3>
  <ul>
    <li *ngFor="let member of group.members">{{ member }}</li>
  </ul>
</div>

Visual: The Asterisk Expansion

┌──────────────────────────────────────────────┐
│  You write:                                  │
│                                              │
│  <div *ngIf="cond">Hello</div>               │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  ▼
┌──────────────────────────────────────────────┐
│  Angular expands to:                         │
│                                              │
│  <ng-template [ngIf]="cond">                 │
│    <div>Hello</div>                          │
│  </ng-template>                              │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  ▼
┌──────────────────────────────────────────────┐
│  When cond is true:                          │
│                                              │
│  <div>Hello</div>                            │
│                                              │
│  When cond is false:                         │
│                                              │
│  (nothing — the div is removed)              │
│                                              │
└──────────────────────────────────────────────┘

Visual: `*ngIf` / `else`

┌──────────────────────────────────────────────┐
│  *ngIf="user; else noUser"                   │
│                                              │
│  user truthy  ──►  render main template      │
│  user falsy   ──►  render #noUser template   │
│                                              │
│  Only one branch exists at a time            │
│                                              │
└──────────────────────────────────────────────┘

Visual: `*ngFor` with `trackBy`

┌──────────────────────────────────────────────┐
│  Without trackBy                             │
│                                              │
│  Old array: [obj1, obj2, obj3]               │
│  New array: [obj1', obj2', obj3']            │
│                                              │
│  References differ → destroy + recreate all  │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  With trackBy: trackById                     │
│                                              │
│  Old: [id=1, id=2, id=3]                     │
│  New: [id=1, id=2, id=3]                     │
│                                              │
│  IDs match → reuse DOM nodes, patch only     │
│                                              │
└──────────────────────────────────────────────┘

Visual: `*ngSwitch`

┌──────────────────────────────────────────────┐
│  [ngSwitch]="status"                         │
│       │                                      │
│       ├──► *ngSwitchCase="'loading'"         │
│       ├──► *ngSwitchCase="'success'"         │
│       ├──► *ngSwitchCase="'error'"           │
│       └──► *ngSwitchDefault                  │
│                                              │
│  Exactly one branch renders                  │
│                                              │
└──────────────────────────────────────────────┘

Visual: Structural vs Attribute Directive

┌──────────────────────────────────────────────┐
│  Structural (*)                              │
│                                              │
│  Adds / removes / replaces elements          │
│  Wraps in <ng-template>                      │
│  Example: *ngIf, *ngFor, *ngSwitchCase       │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  Attribute (no *)                            │
│                                              │
│  Changes an existing element                 │
│  Example: [class.foo], [style.bar], ngClass  │
│                                              │
└──────────────────────────────────────────────┘

Visual: `<ng-container>` vs `<ng-template>`

┌──────────────────────────────────────────────┐
│  <ng-container>                              │
│                                              │
│  Renders nothing, but its children DO render │
│  Used to group elements and apply directives │
│                                              │
│  <ng-container *ngIf="cond">                 │
│    <div>A</div>                              │
│    <div>B</div>                              │
│  </ng-container>                             │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  <ng-template>                               │
│                                              │
│  Renders nothing by itself                   │
│  Its content only appears when stamped out   │
│                                              │
│  <ng-template #tpl>                          │
│    <div>Hidden by default</div>              │
│  </ng-template>                              │
│                                              │
└──────────────────────────────────────────────┘

Summary

Concept	Meaning
Structural directive	Changes DOM structure — add, remove, replace
`*`	Sugar for `<ng-template>`
`*ngIf`	Conditional include/exclude
`*ngIf/else`	Two named branches
`*ngFor`	Repeat for each item
`trackBy`	Stable identity for list updates
`*ngSwitchCase`	One branch of a switch
`*ngSwitchDefault`	Fallback branch
`<ng-template>`	Inert container for conditional content
`<ng-container>`	Invisible grouping element
`CommonModule`	Module that provides the built-ins

Key takeaways:

Structural directives change the shape of the DOM — they add, remove, or replace elements
The asterisk is shorthand for wrapping the element in an <ng-template>
*ngIf includes or excludes based on a truthy/falsy value; else points to a <ng-template #ref>
as narrows the truthy value to a local template variable
*ngFor repeats for each item and exposes index, count, first, last, odd, even
trackBy is essential for dynamic lists — it keeps DOM nodes alive across refreshes
*ngSwitch uses [ngSwitch] on a container and *ngSwitchCase/*ngSwitchDefault on the branches
Two structural directives can’t share an element — wrap one in <ng-container> or restructure
<ng-container> renders nothing but holds directives
<ng-template> renders nothing by itself — used as a target for else and then
All three built-ins come from CommonModule — import it in standalone components

Remember: The asterisk is the tell — any directive with * is structural. *ngIf picks, *ngFor repeats, *ngSwitch selects one of many. They’re sugar for <ng-template>, they add and remove real DOM nodes, and they can be nested but not stacked on the same element. Learn these three and you can shape any view. In new Angular code, prefer the block syntax from the next chapter — but you’ll read *ngIf and *ngFor in existing codebases for years.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!