Плюс минус для аккордеона

Question

Я реализовал аккордеон в своем приложении angular 7, используя css, и мне нужно изменить текст Toggle на изображение или содержимое, показывающее знак + для свертывания и - для раскрытия.Как мне этого добиться.Я временно написал текст переключения.Это должно быть заменено знаком + и -.Обратите внимание, у меня есть таблица стилей scss.Я должен быть в состоянии изменить цвет знака позже.Я создал stackbitz

https://stackblitz.com/edit/angular-vxtfpi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="card">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>

        <a class="pull-right" [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="expand()" role="button"
            [attr.aria-expanded]="isExpanded" aria-controls="nva"> Toggle
        </a>


    </div>
  <div [ngClass]="{'show': isExpanded}" id="nva" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
    [attr.aria-expanded]="isExpanded">
<div class="card-body">

    <div class="form-group row">
        <label for="inputName" class="col-md-2 " style="font-weight: bold">Name</label>
                <div class="col-md-2" style="border: 1px">

                    <kendo-dropdownlist style="width:100%" 
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" >
                    </kendo-dropdownlist>
                </div>

                <label for="inputEmail" class="col-md-2"  style="font-weight: bold">NAV Reporting Cycle</label>
                <div class="col-md-2">

                    <kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle"  [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>

                <label for="inputTitle" class="col-md-2"  style="font-weight: bold">Plan Asset Fund</label>
                <div class="col-md-2">


                    <label  style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox"  style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
  </div>

        <div class="form-group row">
        <label for="inputName" class="col-md-2 " style="font-weight: bold">Name</label>
                <div class="col-md-2" style="border: 1px">

                    <kendo-dropdownlist style="width:100%" 
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" >
                    </kendo-dropdownlist>
                </div>

                <label for="inputEmail" class="col-md-2"  style="font-weight: bold">NAV Reporting Cycle</label>
                <div class="col-md-2">

                    <kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle"  [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>

                <label for="inputTitle" class="col-md-2"  style="font-weight: bold">Plan Asset Fund</label>
                <div class="col-md-2">


                    <label  style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox"  style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
  </div>        
</div>
</div>
</div>

Answer 1

Вы можете использовать простую интерполяцию строк для достижения этой цели. Но, чтобы поддержать ваш стиль, вам может понадобиться настроить что-то вроде ниже

<span [ngClass]="{ 'collapsed': !isExpanded, 'expanded': isExpanded }"> 
  {{ isExpanded ? '-' : '+' }} 
</span>

Теперь вы можете использовать классы .collapsed и .expanded для применения стилей.

Answer 2

Просто замените текст toggle в html на выражение {{ isExpanded ? '-' : '+' }}

https://stackblitz.com/edit/angular-apwdpt