angular - Daraltma ve genişletme simgesi nasıl değiştirilir?

Benim kodum aşağıda ve daraltma ve genişletme yapıldığında simgeyi yukarı ve aşağı değiştirmek istiyorum. Ama bir şekilde çalışmıyor.

<div class="attach-link">

                <a href="javascript:void(0);" *ngIf="fileData.fileDataType.canAttach && !isFinancialEntity" (click)="openFileInput(i)">
                    <i class="fa fa-plus"></i> Add Attachment</a>
                <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect [uploader]="fileData.uploader" (onFileSelected)="onFileSelected()"
                />
                <a class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                    <i class="fa fa-angle-up" ></i>                       

                    Attachments [{{fileData.fileList.length}}] </a>
            </div>

Ve eklenen betik :

 $('a[data-toggle="collapse"]').click(function () {            
        //$(this).find('i').addClass('fa fa-angle-up').removeClass('fa fa-angle-down');
        $(this).find('i .fa fa-angle-up').toggleClass('fa fa-angle-down');
    });

Sorunun ne olduğunu bilmiyorum. Her türlü yardım takdir edilecektir. Çok teşekkürler.

Cevap #1

İşte Angular'da yukarı ve aşağı çökme örnek kodu.

<div class="attach-link">
      <a href="javascript:void(0);"  (click)="openFileInput(i)">
              <i class="fa fa-plus"></i> Add Attachment</a>
            <input type="file" class="hide" id="fileData_{{i}}" ng2FileSelect (onFileSelected)="onFileSelected()"
            />
             <br>                
            <a (click)="collapse=!collapse" class="attachFileList" href="#attachFileList_{{i}}" data-toggle="collapse">
                <i class="fa" [ngClass]="{'fa-angle-up': collapse, 'fa-angle-down': !collapse}"></i>    
                Attachments {{fileData.fileList.length}}                 
            </a>
 </div>

Kontrolör

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  collapse:boolean =true;
}

Cevap #2

@sharma-vikram yanıtına ek olarak, eğer biri yukarıda açıklanan genişlet-kapat sorununu düzeltmek istiyorsa, birden fazla öğe için bir döngüde, bu aşağıdaki şekilde yapılabilir. Not: Bu basit bir çözümdür, ngbCollapse veya material kullanılmamıştır.

Şablon (html):

...
<div *ngFor="let item of items">
  <div class="row">
   <div class="col" (click)="toggle(rowItem)" >
    <i class="fa" [ngClass]="{'fa-plus': rowItem.classList.contains('d-none'), 'fa-minus': !rowItem.classList.contains('d-none')}"></i>
   </div>
  </div>
  <div class="row" #rowItem>
    Value
  </div>
</div>

Kontrolcü (ts):

...
public toggle( element: HTMLElement) {
  element.classList.toggle('d-none');
}