Active

active.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class ActiveService {
  toggle(isActive: boolean): boolean {
    return !isActive;
  }
}

Use services in another component

export class CompetenciesComponent {
  isActive = false;
  constructor(public activeService: ActiveService) {}
  onClick(): void {
    this.isActive = this.activeService.toggle(this.isActive);
  }
}

HTML

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-title" (click)="onClick()">
      <div class="accordion-item-title-text">Web Development</div>
      <i class="icon" [class.icon-minus]="isActive" [class.icon-chevron-down]="!isActive"></i>
    </div>
    <div class="accordion-item-panel" [ngClass]="{ active: isActive }">
      Lorem ipsum
    </div>
  </div>
</div>