Using ngIf for binding

Question

Using ngIf for binding

Trying to bind values based on conditions specified in *ngIf. However, when using the && operator within *ngIf, it seems to be behaving mysteriously.

Sample 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>

The above conditions are functioning correctly, displaying the values as intended.

   
   <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>

In the above condition, attempting to display Everyday only if all conditions are met. However, currently getting displayed as sun mon tue wed thu fri sat Everyday

angular typescript

Answer 1

Answer №1

Implement an If/Else template in Angular

Condition to check if all days are true - If true, display only Everyday
If false, display respective days based on 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 the same as using days.sunday as it is a boolean value

Answer 2

Implement an If/Else template in Angular

Condition to check if all days are true - If true, display only Everyday
If false, display respective days based on 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 the same as using days.sunday as it is a boolean value

Answer 3

Answer №2

When faced with a certain situation, it is important to consistently follow the same routine every day.

<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>
...

Answer 4

When faced with a certain situation, it is important to consistently follow the same routine every day.

<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>
...

Answer 5

Answer №3

When using *ngIf, there is no built-in "else" functionality. This means that if all conditions are met, it will enter every branch.

If you want to avoid this behavior, you will have to adjust your conditions.

This characteristic is not unique to *ngIf and Angular.

Answer 6

When using *ngIf, there is no built-in "else" functionality. This means that if all conditions are met, it will enter every branch.

If you want to avoid this behavior, you will have to adjust your conditions.

This characteristic is not unique to *ngIf and Angular.

Answer 7

Answer №4

If my understanding is correct, you are looking to display the days that are evaluated as true, or 'Every day' if all are true.

In your specific 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 the corresponding view section:

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

Answer 8

If my understanding is correct, you are looking to display the days that are evaluated as true, or 'Every day' if all are true.

In your specific 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 the corresponding view section:

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

Answer 9

Answer №5

Here's a code snippet that should function as expected

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>

Check out the demo here

Answer 10

Here's a code snippet that should function as expected

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>

Check out the demo here

Answer 11

Answer №6

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' ];

Depending on the value of the alldays flag, you can choose to display or hide certain elements as needed.

Answer 12

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' ];

Depending on the value of the alldays flag, you can choose to display or hide certain elements as needed.

Using ngIf for binding

Answer №1

Implement an If/Else template in Angular

Note

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What steps can be taken to implement jQuery within an Angular 15 npm package?

Best Practices for Integrating Angular with Your Custom JavaScript Library

Can auto-import be configured in WebStorm without using double dots?

Component's mocking service is being ignored

Arrange two Angular 2 divs in a single row, with one positioned below the

Tips for preventing the rxjs error "TypeError: Cannot read properties of undefined" in the Angular framework

Using a Jasmine spy to monitor an exported function in NodeJS

Tips for setting up a full-size image with nextJS and the <Image /> component

Issue with upgrading node from 12v to 16v: Trying to access a property that does not exist, specifically 'splice', within a circular dependency in module exports

Connect a datetime-local typed input to a Date attribute in Angular 2

Angular - Automatically populate nested form with provided data

The Environment variable in React Native is not functioning when utilizing TypeScript

Warning: Typescript is unable to locate the specified module, which may result

Master your code with Rxjs optimization

Extract the Top X elements from a multidimensional array

Trouble with updating a variable within a loop in Cypress

Display embedded ng-template in Angular 6

Do you think it's important to include a maxlength validation message for an input field in Angular?

The TypeScript error occurs when trying to set the state of a component: The argument 'X' cannot be assigned to the parameter of type '() => void'

Mapped types: Specify mandatory properties depending on whether an array of identical objects includes a specific string value