angular comparing two array values using ngIf else to show button

I am working on two arrays with ngIf else condition , I got two array values from two tables posts[post_id, user_id, description], likes[post_id, user_id, like_status, like_id].Here i need to compare post_id, user_id and like_status='like' if they are equal then condition true show success button else false default button.

I am already tried but its not working so please help to compare two arrays in using ngIf else .

<div class="container" *ngFor="let post of posts; let i = index">
   <h6> {{post.description}} </h6>

    <div class="container" style="border: 0px solid #ada5a5; ">
        <div class="row">

          <!--like button-->
          <div class=" col-4">

              <div *ngIf="(postLikes.indexOf(user_id) > -1) && (post.post_id == postLikes.post_id) && (postLikes.like_status == 'like'); else default">
                <button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Liked</button><p>liked</p>
              </div>
                <ng-template #default>
                  <button type="button" class="btn btn-secondary" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>like</p>
                </ng-template>
         </div>

        </div>

      </div>


  </div>


// two tables data
  posts: any[] =
    [{
    "post_id": 4,
    "user_id": 2,
    "description": " Hi How are you ",
    "created_date": "2019-01-28T12:30:49.000Z"
}, {
    "post_id": 5,
    "user_id": 2,
    "description": " Working a Fine ",
    "created_date": "2019-01-28T12:31:20.000Z"
}, {
    "post_id": 6,
    "user_id": 2,
    "description": " Hi How are you ......",
    "created_date": "2019-01-28T12:32:15.000Z"
}, {
    "post_id": 7,
    "user_id": 2,
    "description": " 4th test post",
    "created_date": "2019-01-29T07:10:37.000Z"
}, {
    "post_id": 9,
    "user_id": 2,
    "description": " 5th test post",
    "created_date": "2019-01-31T11:17:31.000Z"
}, {
    "post_id": 10,
    "user_id": 2,
    "description": " 6th test post",
    "created_date": "2019-01-31T12:03:54.000Z"
}, {
    "post_id": 11,
    "user_id": 2,
    "description": " 7th post post",
    "created_date": "2019-02-08T05:50:02.000Z"
}, {
    "post_id": 12,
    "user_id": 2,
    "description": " 8th test post ",
    "created_date": "2019-02-08T06:08:01.000Z"
}];

  postLikes:any[] =[{
    "post_id": 4,
    "user_id": 2,
    "like_status": "unlike",
    "like_id": 10
}, {
    "post_id": 5,
    "user_id": 2,
    "like_status": "like",
    "like_id": 9
}, {
    "post_id": 6,
    "user_id": 2,
    "like_status": "like",
    "like_id": 8
}, {
    "post_id": 7,
    "user_id": 2,
    "like_status": "like",
    "like_id": 7
}, {
    "post_id": 9,
    "user_id": 2,
    "like_status": "like",
    "like_id": 11
}];
  post_id: any;
  user_id:Number = 2;
  // likes: Like[];
  like_id: number | null ;
  like_status: string;





Please try my StackBlitz code once and correct the error

https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts

I have updated code, please find changes

https://stackblitz.com/edit/angular-yjcpfk?file=src/app/app.component.html

Hope this helps you.

angular comparing two array values using ngIf else to show button, I am working on two arrays with ngIf else condition , I got two array values from two tables posts[post_id, user_id, description], likes[post_id, user_id, like_status, � Introduction: The ngIf directive is used to show or hide parts of an angular application. It can be added to any tags, it is a normal HTML tag, template, or selectors. It is a structural directive meaning that it includes templates based on a condition constrained to boolean.

There is a problem with postlikes condition in html you compare string with array Ngfor for postlikes array is remaining

I recommend you to do this in typescript using find keyword to compare and pass that result on posts objects like boolean from that it shows and hide your button

Understanding *ngif directive & "*ngIf else then" in Angular, To write ngIf else in angular,we need to define else template for *ngIf. If the display property is true then <div> element will be added to the But there is no relation between two elements. Compare Strings for equality using *ngIf display else template pass conditional expression array.length > 0 to� In Angular 4.x.x You can use ngIf in four way to achieve simple if else procedure: Just Use If <div *ngIf="isValid"> If isValid is true </div> Using If with Else (Please notice to templateName) <div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template>

One way to do this

  1. Create a public method in your component as

    public isPostLikedByUser(postID: any, userID: any){
        // This is actually matching the criteria exactly as you have described in question RETURN true or false
        return this.postLikes.findIndex((i) => i.post_id == postID && i.user_id == userID && i.like_status == 'like') > -1;
    }
    
  2. Now call this method in your view as

     <div *ngIf="isPostLikedByUser(post.post_id, post.user_id); else otherTest">
    

I have updated you stackblitz example as well. I hope this helps.

https://stackblitz.com/edit/angular-wddupe?embed=1&file=src/app/app.component.html

How to Use *ngIf else in Your Angular Applications, A quick tutorial on how to use the *ngIf else directive in Angular to is always a time when you have to compare between two entities. Just like most programming languages, Angular has directives like if , for and switch for handling a template based on the value of an expression coerced to Boolean. From official documentation - ngIf is a structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause.

NgIf & NgSwitch • Angular, With NgIf we can conditionally add or remove an element from the DOM. If we are faced with multiple conditions a cleaner alternative to multiple nested NgIf Know how to conditionally add or remove elements from the DOM using the 1's ng-if directive however Angular doesn't have a built-in alternative for ng-show . How to use *ngIf else in Angular. In this tutorial, we are going to take a look at the ngIf directive. We will discover how we can use it to show or hide parts of our angular application. Also, we will find out how the ngIf directive differs from using the "hidden" attribute.

angular.equals, Determines if two objects or two values are equivalent. are of the same type and all of their properties are equal by comparing them with angular.equals . Angular 8 ngIf, Then and Else Example. We are going to use ngIf, else and then in Angular 8. In this example, we will be switching the ng-template > based on the condition. When we talk about if/then/else method, it provides immense flexibility to the Angular developers to show the content based on condition. Check out the below example.

Angular 4 NgIf-Then-Else Example, This page will walk through Angular 4 NgIf-Then-Else example. If condition in NgIf is false and it is necessary to show a template then we use In the second scenario we have buttons to change the value of then and else binding point. HttpClient post � Angular FormArray setValue() and patchValue()� This tutorial will provide example of how to check array is empty in angular. i would like to show you angular check if string is empty or null. This article will give you simple example of angular check if object is empty ngif. it's simple example of angular check ngif array is empty. Alright, let’s dive into the steps.

Comments
  • length of posts array and postLikes are always same?