CODEWITHSUNDEEP
angulartypescript
Felix Christo
Felix Christo

Reputation: 287

Binding with ngIf

I am trying to bind values according to the condition mentioned in *ngIf. When I try && operator inside *ngIf, its working mysteriously.

Code

       <div *ngIf="days.sunday == true">
          <p class="circle ml-3">Sun</p>
        </div>
        <div *ngIf="days.monday == true">
          <p class="circle ml-2">Mon</p>
        </div>
        <div *ngIf="days.tuesday == true">
          <p class="circle ml-2">Tue</p>
        </div>
        <div *ngIf="days.wednesday == true">
          <p class="circle ml-2">Wed</p>
        </div>
        <div *ngIf="days.thursday == true">
          <p class="circle ml-2">Thu</p>
        </div>
        <div *ngIf="days.friday == true">
          <p class="circle ml-2">Fri</p>
        </div>
        <div *ngIf="days.saturday == true">
          <p class="circle ml-2">Sat</p>
        </div>

Above condition are working fine. I can print the values accordingly.

   <div *ngIf="days.sunday == true && days.monday == true  && days.tuesday  == true && days.wednesday  == true && 
   days.thursday  == true && days.friday == true &&  days.saturday == true">
            <p class="circle ml-2">Everyday</p>
                </div>

From above condition, I am trying to print Everyday if all condition are true but I am getting printed sun mon tue wed thu fri sat Everyday

Upvotes: 2

Views: 3481

Answers (6)

Amit Golhar
Amit Golhar

Reputation: 809

component.html

<div *ngFor="let day of days">
         <div *ngIf="day == 'sunday'">
          <p class="circle ml-3">Sun</p>
        </div>
        <div *ngIf="day == 'monday'">
          <p class="circle ml-2">Mon</p>
        </div>
        <div *ngIf="day == 'tuesday'">
          <p class="circle ml-2">Tue</p>
        </div>
        <div *ngIf="day == 'wednesday'">
          <p class="circle ml-2">Wed</p>
        </div>
        <div *ngIf="day == 'thursday'">
          <p class="circle ml-2">Thu</p>
        </div>
        <div *ngIf="day == 'friday'">
          <p class="circle ml-2">Fri</p>
        </div>
        <div *ngIf="day == 'saturday'">
          <p class="circle ml-2">Sat</p>
</div>
 </div>

 <div *ngIf="alldays == true">
    <p class=" circle ml-2 ">Everyday</p>
</div>

component.ts:

  alldays = true;
   days: any = ['sunday', 'monday', 'tuesday ', 'wednesday', 'thursday', 'friday', 'saturday' ];

Base on your alldays flag you can hide and show you want

Upvotes: 1

Shohel
Shohel

Reputation: 3934

The following code should work

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  days = { sunday: true, monday: true, tuesday: true, wednesday: true, thursday: true, friday: true, saturday: true };

  isEveryDay() {
    let everyday = true;
    for (let key in this.days) {
      let value = this.days[key];
      if (!value) {
        everyday = false;
        break;
      }
    }
    return everyday;
  }
}

<hello name="{{ name }}"></hello>
<div *ngIf="!isEveryDay()">
    <div *ngIf="days.sunday == true">
        <p class="circle ml-3">Sun</p>
    </div>
    <div *ngIf="days.monday == true">
        <p class="circle ml-2">Mon</p>
    </div>
    <div *ngIf="days.tuesday == true">
        <p class="circle ml-2">Tue</p>
    </div>
    <div *ngIf="days.wednesday == true">
        <p class="circle ml-2">Wed</p>
    </div>
    <div *ngIf="days.thursday == true">
        <p class="circle ml-2">Thu</p>
    </div>
    <div *ngIf="days.friday == true">
        <p class="circle ml-2">Fri</p>
    </div>
    <div *ngIf="days.saturday == true">
        <p class="circle ml-2">Sat</p>
    </div>
</div>
<div *ngIf="isEveryDay()">
    <p class="circle ml-2">Everyday</p>
</div>

Demo

Upvotes: 1

molamk
molamk

Reputation: 4116

Use an If/Else template

  • Check if all days are true. Then you print only Everyday
  • Else print other days according to their conditions
<!-- If block for "Everyday" -->
<div *ngIf="days.sunday && days.monday && days.tuesday && days.wednesday && 
   days.thursday && days.friday && days.saturday; else elseBlock">
    <p class=" circle ml-2 ">Everyday</p>
</div>

<!-- Else block for other days "Sun, Mon, etc..." -->
<ng-template #elseBlock>
    <div *ngIf="days.sunday">
        <p class="circle ml-3">Sun</p>
    </div>
    <div *ngIf="days.monday">
        <p class="circle ml-2">Mon</p>
    </div>
    <div *ngIf="days.tuesday">
        <p class="circle ml-2">Tue</p>
    </div>
    <div *ngIf="days.wednesday">
        <p class="circle ml-2">Wed</p>
    </div>
    <div *ngIf="days.thursday">
        <p class="circle ml-2">Thu</p>
    </div>
    <div *ngIf="days.friday">
        <p class="circle ml-2">Fri</p>
    </div>
    <div *ngIf="days.saturday">
        <p class="circle ml-2">Sat</p>
    </div>
</ng-template>

Note

days.sunday === true is equivalent to days.sunday since it's a boolean

Upvotes: 2

Knelis
Knelis

Reputation: 7129

If I understand you correctly, you want to either show the days that evaluate to true, or 'Every day' if everything is true.

In your component:

everyday = this.days.sunday === true && this.days.monday === true && 
    this.days.tuesday === true && this.days.wednesday === true && 
    this.days.thursday === true && this.days.friday === true && this.days.saturday === true;

Then in your view:

<div *ngIf="days.sunday === true && everyday === false">
   <p class="circle ml-3">Sun</p>
</div>
... etc.
<div *ngIf="everday === true">
   <p class="circle ml-3">Every day</p>
</div>

Upvotes: 1

chris01
chris01

Reputation: 12331

The *ngIf does not automatically come with a "else". So if every condition evaluates to true, then it will go into every branch.

If you do not want it that way then you need to rewrite your conditions.

That behaviour is not special to *ngIf and Angular.

Upvotes: 1

zmag
zmag

Reputation: 8251

For given condition, you have to do same thing to every single day as you did on Everyday.

<div *ngIf="days.sunday == true && days.monday == false && days.tuesday == false &&
days.wednesday == false && days.thursday == false && days.friday == false &&
days.saturday == false">
  <p class="circle ml-3">Sun</p>
</div>
...

Upvotes: 1

Related Questions