CODEWITHSUNDEEP
htmlangulartypescriptevent-handlingfrontend
Jakub Rusinowicz
Jakub Rusinowicz

Reputation: 384

Angular 2 - trigger animation for multiple elements with same function

I am starting with angular right now, and while i was trying to create toggle categories menu i occured a problem.

I have my navbar component with animation trigger:

  trigger('slideCategory', [
      state('opened', style({
          display: 'block',
      })),

      state('closed', style({
          display: 'none',
      })),

      state('visible', style({
          opacity: 1
      })),

      state('unvisible', style({
          opacity: 0
      })),

      transition('visible <=> unvisible', animate('300ms'))
  ])

And a component looking like this:

export class NavbarComponent implements OnInit {

ngOnInit() {

}

@Output() navState: EventEmitter<string> = new EventEmitter<string>();
menuState: string = 'out'
stateA: string = 'out';
categoryState: string = 'closed';
listState: string = 'unvisible';

navToggle() {
    this.stateA = this.stateA === 'out' ? 'in' : 'out';
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
    this.categoryState = this.menuState === 'out' ? 'closed' : 
    'closed';
    this.navState.emit(this.menuState);
}

categoryToggle($event) {
     this.categoryState = this.categoryState === 'closed' ? 'opened' : 
 'closed';
     this.listState = this.listState === 'unvisible' ? 'visible' : 
 'unvisible';
 }
}

My HTML code for this component:

    <nav [@slideInOut]="menuState">

      <i class="{{ menuState == 'out' ? 'fa fa-bars' : 'fa fa-times' }}" (click)="navToggle()"></i>
      <ul>
        <li><a href="/"><i *ngIf="menuState == 'out'" class="fa fa-home"></i><span [@showA]="stateA">Strona główna</span></a></li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-mars"></i>
            <span [@showA]="stateA" >Mężczyzna <i (click)="categoryToggle($event)" class="{{ categoryState == 'opened' ? 'fa fa-chevron-up' : 'fa fa-chevron-down' }}" aria-hidden="true"></i></span>
          </a>
          <ul [@slideCategory]="categoryState">
            <li [@slideCategory]="listState">Obuwie</li>
            <li [@slideCategory]="listState">Okrycie wierzchnie</li>
            <li [@slideCategory]="listState">T-shirty</li>
            <li [@slideCategory]="listState">Bluzy</li>
            <li [@slideCategory]="listState">Spodnie</li>
          </ul>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-venus" aria-hidden="true"></i>
            <span [@showA]="stateA">Kobieta <i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </a>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-intersex"></i>
            <span [@showA]="stateA">Unisex <i (click)="categoryToggle()" class="{{ categoryState == 'opened' ? 'fa fa-chevron-up' : 'fa fa-chevron-down' }}" aria-hidden="true"></i></span>
          </a>
        </li>
        <li>
          <a><i *ngIf="menuState == 'out'" class="fa fa-child" aria-hidden="true"></i>
            <span [@showA]="stateA">Dzieci<i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          </a>
        </li>
      </ul>

    </nav>

And what I want to achieve is that when I click on element with (click) = "categoryToggle()" is to toggle only current clicked element, not every element which contain this event.

I thought about adding any class for clicked target, but how shoud i do that in order to not losing trigger animation effect?

Upvotes: 1

Views: 1297

Answers (1)

Jakub Rusinowicz
Jakub Rusinowicz

Reputation: 384

Okay, that was very dump. Just solved it by declaring categoryState as an array with values for each category state:

export class NavbarComponent implements OnInit {

ngOnInit() {

}

@Output() navState: EventEmitter<string> = new EventEmitter<string>();
menuState: string = 'out'
stateA: string = 'out';
categoryState: any = {
    1: 'closed',
    2: 'closed',
    3: 'closed',
    4: 'closed',
}

...

categoryToggle(index) {
    this.categoryState[index] = this.categoryState[index] === 'closed' ? 'opened' : 'closed';
    this.listState = this.listState === 'unvisible' ? 'visible' : 'unvisible';
}

Upvotes: 1

Related Questions