Using Angular's ngFor directive to iterate over a collection based on a true

Question

Using Angular's ngFor directive to iterate over a collection based on a true

I am currently attempting to resolve the following condition: if the condition is true, display a button, otherwise hide the button.

OfferMatching() { this.getmatchoffer.filter(obj => { debugger for (let i = 0; i < this.applicationJobList.length; i++){ var Options = { hour12: false }; const offerStartDate = new Date(this.applicationJobList[i].offerSteps.initial.jobDateoffer).toLocaleDateString(); const offerStartTime= new Date(this.applicationJobList[i].offerSteps.initial.startTime).toLocaleTimeString('it-IT',Options); const offerEndTime = new Date(this.applicationJobList[i].offerSteps.initial.endTime).toLocaleTimeString('it-IT',Options); const bookDateoffer = new Date (obj.offerSteps.initial.jobDateoffer).toLocaleDateString() ; const bookstartTime = new Date(obj.offerSteps.initial.startTime).toLocaleTimeString('it-IT',Options); const bookendTime = new Date(obj.offerSteps.initial.endTime).toLocaleTimeString('it-IT',Options); debugger if (bookDateoffer === offerStartDate ) {

      if (bookstartTime  < offerStartTime) {

        if (bookendTime < offerEndTime) {
       this.samemOffer = false;

       } else {
       this.samemOffer = true;
       }

      } else if (bookstartTime > offerEndTime) {

        if (bookendTime > offerEndTime) {
         this.samemOffer = false;

       } else {
        this.samemOffer = true;
      }

       } else {
       this.samemOffer = true;
        }
    }
  }

})

} this is a snippet of Angular TypeScript code

                        </div>

Please assist in resolving my problem

This is Angular HTML code block

angular typescript

Answer 1

Answer №1

Assuming you have an array of objects that requires iteration.

First Strategy

Filter the array to display only the desired items. Utilize the Array.filter method for this purpose.

Second Strategy

Develop a custom pipe to manage the logic and determine whether to return true or false to *ngIf. Modify your code accordingly:

@Pipe({
  name: 'resolve',
  pure:true
})
export class ResolvePipe implements PipeTransform {

  transform(bookstartTime: any, offerStartTime: any, bookendTime: any, offerEndTime: any): boolean {
    if (bookstartTime < offerStartTime) {
      return bookendTime > offerEndTime
    } else if (bookstartTime > offerEndTime) {
      return bookendTime < offerEndTime
    } else {
      return true;
    }
  }
}
// In the HTML
<div 
*ngIf="resolve | 
data.bookstartTime:data.offerStartTime:data.bookendTime:data.offerEndTime">
hello
</div>

[NOTE] Remember to include your own typings and ensure to add this pipe to your ng module declarations array when opting for the second strategy.

Answer 2

Assuming you have an array of objects that requires iteration.

First Strategy

Filter the array to display only the desired items. Utilize the Array.filter method for this purpose.

Second Strategy

Develop a custom pipe to manage the logic and determine whether to return true or false to *ngIf. Modify your code accordingly:

@Pipe({
  name: 'resolve',
  pure:true
})
export class ResolvePipe implements PipeTransform {

  transform(bookstartTime: any, offerStartTime: any, bookendTime: any, offerEndTime: any): boolean {
    if (bookstartTime < offerStartTime) {
      return bookendTime > offerEndTime
    } else if (bookstartTime > offerEndTime) {
      return bookendTime < offerEndTime
    } else {
      return true;
    }
  }
}
// In the HTML
<div 
*ngIf="resolve | 
data.bookstartTime:data.offerStartTime:data.bookendTime:data.offerEndTime">
hello
</div>

[NOTE] Remember to include your own typings and ensure to add this pipe to your ng module declarations array when opting for the second strategy.

Using Angular's ngFor directive to iterate over a collection based on a true

Answer №1

Similar questions

Guide to implementing real-time filtering for a table through user input in a text box

What is the most appropriate form to use, and what factors should be considered in determining

What is the correct way to invoke a static TypeScript class function in JavaScript?

Angular reactive form encountered an issue with an incorrect date being passed

There seems to be an issue with the API response being undefined when displayed on

Error: The function split cannot be used on the token

I'm looking to switch out the `~` to turn it into a URL for the backend, seeing as `<img alt="" src="~/media/Banner/plane.JPG">` is returning a 404 error

Encountering compilation errors with Angular project following installation of a package

Tips for stopping TypeScript code blocks from being compiled by the Angular AOT Webpack plugin

Changing the method signature in a TypeScript interface to replace/override the original one

Making if-else statements easier

How to remove the border of the MUI Select Component in React JS after it has been clicked on

How to automatically redirect in Angular 2 by utilizing router.navigate

Discover the steps to dynamically set global data in Vue during runtime

An error occurred: Unable to access the 'basemapLayer' property due to it being undefined

Encountering a problem with Typescript and eslint while utilizing styled-components and Material UI: "Warning: React does not identify the `showText` prop on a DOM element."

Typescript: Retrieve an interface containing properties that are found in interface A, but not in interface B

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

Tips to store Google fonts in the assets directory

What is the process for loading a model using tf.loadModel from firebase storage?