setting-management.component.html

<abp-page [title]="'AbpSettingManagement::Settings' | abpLocalization">
  <div id="SettingManagementWrapper">
    <div class="card">
      <div class="card-body">
        <div class="row" ngTabs>
          <div class="col-12 col-md-3 mb-2 mb-md-0">
            <div class="nav flex-column nav-pills" id="nav-tab" ngTabList orientation="vertical"
              [selectedTab]="selected?.name">
              <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
                <button ngTab #tab="ngTab" [value]="setting.name" (click)="selected = setting"
                  class="nav-link text-start" [class.active]="tab.selected()" *abpPermission="setting.requiredPolicy">
                  {{ setting.name | abpLocalization }}
                </button>
              </ng-container>
            </div>
          </div>
          <div class="col-12 col-md-9">
            @if (settings.length) {
            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
              <div ngTabPanel [value]="setting.name" class="tab-pane" *abpPermission="setting.requiredPolicy">
                <ng-container *ngComponentOutlet="setting.component" />
              </div>
            </ng-container>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</abp-page>