Struggle in *ngIf in angular

Question

I am trying to add site1Sec.length < 1 into *ngIf

.component.ts

site1Sec = [];
site2Sec = [];

.html

<nb-step *ngFor="let selectedSite of selectedSiteOptions" [label]="selectedSite.name">
                            <ng-template #selectedSite.name>{{selectedSite.name}} </ng-template>
                            <!-- inside each sites -->
                            <div class="row no-gutters my-3 justify-content-end w-100"
                                >
                                <button nbButton class="new-btn" status="primary"
                                *ngIf="selectedSite.code+'Sec'.length < 1"        
                                 [id]="selectedSite.name"
                                (click)="onSectionAddHandler(selectedSite.id)"
                                [id]="selectedSite.id"
                                    size="small">
                                    Add New Section
                                </button>
                            </div>
// removed

*ngIf="selectedSite.code+'Sec'.length < 1" this is wrong It take as length of string value (length is 3). How can I bind site1Sec , site2Sec,......

I need

*ngIf="site1Sec.length < 1"  // if site1 is selected
*ngIf="site2Sec.length < 1"  // if site2 is selected

*ngIf="site3Sec.length < 1"  // if site3 is selected 
// and so on

please anyone give a solution

score 1 · Answer 1 · answered Apr 27 '22 at 03:14

Create a method on your component:

public getSiteSec(siteCode: string) {
  return this[siteCode + 'Sec'];
}

I was researching if this keyword is accessible from template but didn't found the answer. Since I'm on mobile right now I can't test it. So I'm suggesting using a method to do it.

Edit

Just answering my own question and providing a better answer:

You can access this keyword within your template, so you can just do:

*ngIf="this[selectedSite.code+'Sec'].length < 1"

Struggle in *ngIf in angular

1 Answers1