We can use a service, that contains two objects outerCounterMap and innerCounterMap their job is to store the counter, based on the component name.

The only special condition is that, we can only increment the outer counter only once, when the value is set to zero.

 incrementOuterCounter(className: string): void {
    if (!this.outerCounterMap[className]) {
      this.outerCounterMap[className] = 0;
    }
    if (this.outerCounterMap[className] === 0) { // update only once!
      this.internalInnerCounter++;
      this.outerCounterMap[className] = this.internalInnerCounter;
    }
  }

Now, we can use this.constructor.name to get the component name, to track the indexes based on this name, as the key to the maps of the service(outerCounterMap and innerCounterMap). This will generate the desired output.

Full Code:

one.component.ts

import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { CounterService } from '../../services/counter.service';

@Component({
  selector: 'app-one',
  standalone: true,
  imports: [],
  templateUrl: './one.component.html',
  styleUrl: './one.component.css',
})
export class OneComponent {
  className: string = this.constructor.name;
  label: string = '';
  constructor(public counter: CounterService) {
    this.counter.incrementOuterCounter(this.className);
    this.counter.incrementInnerCounter(this.className);
  }

  getLabel() {
    return (
      this.counter.getOuterCounter(this.className) +
      '.' +
      this.counter.getInnerCounter(this.className)
    );
  }
}

service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CounterService {
  private outerCounterMap: { [key: string]: number } = {};
  private innerCounterMap: { [key: string]: number } = {};
  internalInnerCounter = 0;
  constructor() {}

  getInnerCounter(className: string): number {
    return this.innerCounterMap[className] || 0;
  }

  incrementInnerCounter(className: string): void {
    if (!this.innerCounterMap[className]) {
      this.innerCounterMap[className] = 0;
    }
    this.innerCounterMap[className] = this.innerCounterMap[className] + 1;
  }

  getOuterCounter(className: string): number {
    return this.outerCounterMap[className] || 0;
  }
  incrementOuterCounter(className: string): void {
    if (!this.outerCounterMap[className]) {
      this.outerCounterMap[className] = 0;
    }
    if (this.outerCounterMap[className] === 0) {
      this.internalInnerCounter++;
      this.outerCounterMap[className] = this.internalInnerCounter;
    }
  }
}

Stackblitz Demo

A solution using 2 service instances:

@Injectable({
    providedIn: "root"
})
export class Counter {

    private _counter = 0;

    increment() {
       this._counter++;
    }

    get counter(): number {
       return this._counter;
    }
}

The component using the counters:

import { Counter } from './counter';
...

@Component({
    templateUrl: '....',
    standalone: true,
    imports[ ... ],
    providers: [
       Counter
    }
})
export class MyComponent {
    innerCounter = inject(Counter); // the instance provided by this component
    outerCounter = inject(Counter, { skipSelf: true }); // the instance provided in root

    ....
}