CODEWITHSUNDEEP
angularangular-ng-if
Mellville
Mellville

Reputation: 1097

Angular: hidden div based on data not showing

I have these two divs that show/hide based on data; in this case, if a certain company has a billing card, it will show the info of the card, else, it will show the div where you can add that info. But only one div is showing and I don't know why. The code:

TS

 public comapanyHasBilling(companyId: string) {
        const searchID = this.billingList.find(item => item.companyId === item.companyId)
        if (searchID !== undefined){
          console.log(searchID.companyId)
        }

        });
      }

HTML (first div)

<!--If there is a card-->
    <div *ngIf="!comapanyHasBilling(entity.id)" class="icon-company-title">
      <div class="business-icon">
        <i class="material-icons md-18">credit_card</i>
      </div>
      <span class="company-card-title">Credit Card</span>
      <button class="" mat-icon-button [matMenuTriggerFor]="menu">
        <i class="material-icons edit">mode_edit</i>
      </button>
    </div>



     <!-- Content credit card -->
        <mdl-card-title mdl-card-expand fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="3px">

          <span class="company-card-content company-card-content-edges">cardRef</span>
          <span class="company-card-content">card</span>
          <span class="company-card-content">test</span>
          <span class="company-card-content company-card-content-edges" fxLayoutGap="5px">Name</span>
        </mdl-card-title>

And the other div

<!--If there is no card-->
        <mdl-card-title *ngIf="!comapanyHasBilling(entity.id)" mdl-card-expand fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="30px">

            <span class="company-card-title">Payment Method</span>
            <button (click)="createBillingCard(entity.id)" mat-raised-button class="add-button">ADD</button>

        </mdl-card-title>
      </mdl-card>

No mather what, if I type this *ngIf="!comapanyHasBilling(entity.id) on any div, she will appear...Why? The logs say i'm getting the id

EDIT:

TS:

public companyHasBilling(companyId: string) {
    const searchID = this.billingList.find(item => item.companyId === companyId)
    if (searchID !== undefined) {
      console.log(searchID.companyId);
    }
    return searchID;
  };

HTML

<mdl-card-title *ngIf="companyHasBilling(entity.id) === null" mdl-card-expand fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="30px">

        <span class="company-card-title">Payment Method</span>
        <button (click)="createBillingCard(entity.id)" mat-raised-button class="add-button">ADD</button>

    </mdl-card-title>

<div *ngIf="companyHasBilling(entity.id) !== null" class="icon-company-title">
      <div class="business-icon">
        <i class="material-icons md-18">credit_card</i>
      </div>
      <span class="company-card-title">Credit Card</span>
      <button class="" mat-icon-button [matMenuTriggerFor]="menu">
        <i class="material-icons edit">mode_edit</i>
      </button>
    </div>

But still nothing....

Upvotes: 2

Views: 844

Answers (4)

David
David

Reputation: 34435

Try returning a boolean (the problem might be that you check for strick equality with undefined and then null)

public companyHasBilling(companyId: string) {
    return this.billingList.find(item => item.companyId === companyId) != undefined;

  };

And in html

 <div *ngIf="!companyHasBilling(entity.id)>
...
<div *ngIf="companyHasBilling(entity.id) >

Upvotes: 1

zgue
zgue

Reputation: 3850

EDIT Your 'comapanyHasBilling' has to return a result and as Patryk Brejdak says you have to change the companyId comparison.

public comapanyHasBilling(companyId: string):boolean {
  const searchID = this.billingList.find(item => item.companyId === companyId);

  if (searchID !== undefined){
    return true;        
  }

  return false;    
}

Upvotes: 1

Vala Khosravi
Vala Khosravi

Reputation: 2570

Try this for your second component

<div  *ngIf="!comapanyHasBilling(entity.id)">
    <mdl-card>
        <mdl-card-title mdl-card-expand fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="30px">
             <span class="company-card-title">Payment Method</span>
             <button (click)="createBillingCard(entity.id)" mat-raised-button class="add-button">ADD</button>
         </mdl-card-title>
    </mdl-card>
</div>

Upvotes: 1

Patryk Brejdak
Patryk Brejdak

Reputation: 1601

If I'm not mistaken you are just using wrong arguments for find method.

const searchID = this.billingList.find(item => item.companyId === item.companyId)
// your function. Look at item.companyId === item.companyId
// well it always find an element :D


const searchID = this.billingList.find(item => item.companyId === companyId)
// this is how it should look like

Upvotes: 1

Related Questions