How to avoid using *ngFor in Angular?

Question

I have this part of code :

<div class="footer" *ngIf="isPartner && canAddNewLang && !deletion"
      fxLayout="row" fxLayout.xs="row"
      fxLayoutAlign="center center" fxFlex="100">
      <div class="add-lang"
      *ngFor="let catalog of catalogs"
        routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang"
        >
        <div class="card__container-header-button" >
          <div class="card__icon-wrapper">
            <svg class="card-button-sml" width="8"
              height="8" viewBox="0 0 8 8"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6.99513 3.1C7.21913 3.1 7.40579 3.17467 7.55513 3.324C7.70446 3.464 7.77913 3.646 7.77913 3.87C7.77913 4.094 7.70446 4.28067 7.55513 4.43C7.40579 4.57 7.21913 4.64 6.99513 4.64H5.03513V6.474C5.03513 6.73533 4.94646 6.95 4.76913 7.118C4.60113 7.286 4.38646 7.37 4.12513 7.37C3.86379 7.37 3.64446 7.286 3.46713 7.118C3.29913 6.95 3.21513 6.73533 3.21513 6.474V4.64H1.29713C1.07313 4.64 0.886458 4.56533 0.737125 4.416C0.587792 4.26667 0.513125 4.08 0.513125 3.856C0.513125 3.632 0.587792 3.45 0.737125 3.31C0.886458 3.17 1.07313 3.1 1.29713 3.1H3.21513V1.014C3.21513 0.752667 3.29913 0.538 3.46713 0.37C3.64446 0.202 3.86846 0.118 4.13913 0.118C4.40046 0.118 4.61513 0.202 4.78313 0.37C4.95113 0.538 5.03513 0.752667 5.03513 1.014V3.1H6.99513Z"
                fill="white" />
            </svg>
          </div>
          <span class="btn__text">
            {{ 'apps.add-new-language' | translate }}
          </span>
        </div>
      </div>
      <!-- undo delete -->
     </div>

where I show a button and direct user to a path and here is the problem. I have

  *ngFor="let catalog of catalogs"
    routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang"

I am using

routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang"

to direct the user in the right path and I need the catalog, for the moment I don't know another way except by using for, but in this way, I am showing the button like three times and that is definitely wrong. So the catalog is

 @Input() catalogs: IAppInfoModel[];

and IAppInfoModel

export interface IAppInfoModel {
  appIdToSearch: number;
  appId: number;
  ..............
}

By console.log (this.catalogs); I have : catalogs

catalog-group.component.ts:35 (3) [{…}, {…}, {…}]
catalog-group.component.ts:35 (3) [{…}, {…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (3) [{…}, {…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]

this is one of them looks with there propertys :

allVersions: [{…}]
appId: 7
appIdToSearch: 40
appMedias: []
bookMarked: false
companiesSize: []
companyId: undefined
companyName: "testCompany 2.0"
deletionRequested: false
easyUseScore: null
enabled: true
featureScore: null
features: []
featuresSummary: []
hasLogo: false
integratedApps: []
languageId: 2
pricing: []
supportedDevices: []
supportedLanguages: []
totalScore: null
typesOfSoftware: [{…}]
valueMoneyScore: null
vendor: "testCompany 2.0"
versionAppDescription: undefined
versionAppName: "sdfsdf"
versionAppWebsite: undefined
versionId: 200
versionLogoExtention: undefined
versionNumber: 1
versionShortAppDescription: null
versionStatusId: 1
versionUpdatedAt: undefined

and for I don't have much experience in angular so please if you have any idea please help me.

Answer 1

try this out

<div *ngFor="let catalog of catalogs; let i = iindex as i; first as isFirst">
    <div *ngIf="isFirst" class="row" routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang">

</div>

Answer 2

Change this:

*ngFor="let catalog of catalogs"

To this:

*ngIf="catalogs[0] as catalog"