ngIf inside ngfor to validate each item of the for loop

Question

<li *ngFor="let year of paper?.years" class="list-group-item">                                                
                    <div>
                        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
                        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>
                    <div> 
                        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
                        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>   
</li>

The above code is working fine. But I want to check each fileId, if its null or not. If null then the links will not generate and vice versa.

I have setted *ngIf, below is a code sample. But its not working.

<li *ngFor="let year1 of paper?.years" class="list-group-item">  

                    <div *ngif="year.questionPaper.fileId != ''">
                        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
                        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>
                    <div *ngif="year.markScheme.fileId != ''"> 
                        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
                        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>                      

                </li>

I have tried several other ways, but nothing is working. Like : defining ng-template.

Another typo in `*ngif="year.markScheme.fileId = ''"` `=` should be `==` — Günter Zöchbauer, Jan 03 '18 at 06:50
typo *ngFor="let year1 of paper?.years" should it not be year instead of year1? — Deepak Jha, Jan 03 '18 at 06:52

Surjeet Bhadauriya · Accepted Answer · 2018-01-03T08:30:11.853

6

No need to use == or !=.

Just modify your code with the below code.

<li *ngFor="let year1 of paper?.years" class="list-group-item">      
     <div *ngIf="year.questionPaper.fileId">
        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
     </div>
     <div *ngIf="year.markScheme.fileId"> 
        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
    </div>                        
</li>

Explanation:

<div *ngIf="year.questionPaper.fileId"> // This will automatically check for null, undefined and empty string.

edited Jan 03 '18 at 08:30

answered Jan 03 '18 at 07:01

Surjeet Bhadauriya

6,755
3
34
52

It has Solved! Thank you!! All answers are right. But as this answer is more appropriate and descriptive I am marking this as right answer. – Abdur Rahim Jan 03 '18 at 08:45
What about `0` (Zero)? – Erik Philips Aug 20 '19 at 20:25
Change condition to:
– Surjeet Bhadauriya Aug 21 '19 at 05:36

score 3 · Answer 2 · answered Jan 03 '18 at 06:49

You have a typo. use *ngIf

<div *ngIf="year.questionPaper.fileId != ''">
                        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
                        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>
                    <div *ngIf="year.markScheme.fileId = ''"> 
                        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
                        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>

Great! the syntax error is gone. WHAT A SILLY Mistake I made. Thank you very much. But probably its not checking the fileId is empty or not. Can you guide me please? — Abdur Rahim, Jan 03 '18 at 07:47

score 3 · Answer 3 · answered Jan 03 '18 at 06:51

3

An extension to Syedur answer,

*ngIf="year.markScheme.fileId = ''" in the above line you missed == or === but not =. Can be =

answered Jan 03 '18 at 06:51

Mr_Perfect

8,254
11
35
62

It has Solved! Thank you – Abdur Rahim Jan 03 '18 at 08:44

score 1 · Answer 4 · answered Jan 14 '21 at 10:16

Surjeet Bhadauriyas answer led me to the right path with my problem. Still i wanna reference this question with following error: "Cannot read property name of undefined", because searching for this error brought me to mostly async data problems, which this is not:

The array has more data points than the dictionary, i want to iterate (ngFor) over the array and access the dictionary except (ngIf) when there is no datapoint.

component

letters: string[] = ["A", "B", "C"];
dictionary: { [key: string]: { name: string } } = {};

ngOnInit() {
    this.dictionary["A"] = { name: "Alpha" };
    this.dictionary["B"] = { name: "Beta" };
}

template (does not work)

<ng-container *ngFor="let letter of letters">
    <ng-container *ngIf="letter!=C">
        <pre>{{letter}}</pre>
        <pre>{{dictionary[letter].name}}</pre>
    </ng-container>
</ng-container>

template (does work)

<ng-container *ngFor="let letter of letters">
    <ng-container *ngIf="dictionary[letter]">
        <pre>{{letter}}</pre>
        <pre>{{dictionary[letter].name}}</pre>
    </ng-container>
</ng-container>

*ngIf inside *ngfor to validate each item of the for loop

4 Answers4

ngIf inside ngfor to validate each item of the for loop