Active class on clicked item Angular

export class TabComponent implements OnInit {
  @Input() isActive: boolean = false;

  mockData?: readonly IMenu[];

  activeIndex: number | null = null;

  constructor(private readonly mockDataService: MenuService) {}

  setActiveIndex(index: number): void {
    this.activeIndex = index;
  }

  ngOnInit(): void {
    this.mockData = this.mockDataService.getMockTab();
  }
}

<ul class="tab" [ngClass]="{ dark: isDark }">
  <li
    class="tab-item"
    *ngFor="let item of mockData; let i = index"
    [isActive]="activeIndex === i"
    (click)="setActiveIndex(i)"
  >
    <button class="tab-item-link" [ngClass]="{ active: activeIndex === i }" href="">{{ item.title }}</button>
  </li>
</ul>