DEV Community

Kamana
Kamana

Posted on

Implementation of Vote feature in ionic 4.

I'm publishing the first part where I used this feature that was in a chatroom.
Should I explain the code?

Read it on your own risk

Using Firebase so here, I have used the array chatRef from ts and then we will check if the uid(user id is my user id ) is yes ill
ill type my message and in the next line if the chat message is a poll ill see the poll.
and we have two buttons we have only kept two vote options.
Next is the same if i'm not the user that is the user is another stranger from chatroom, the code is for them.

We will store our user id data at a different place and stranger\s at a collective place. We will see that next time.

  <ion-content padding>
    <div class="chat" *ngFor= "let chat of chatRef | async">
        <div class="me" *ngIf = "uid==chat.UserID">
          {{chat.Message}}
        <div  class="me" *ngIf = "chat.Message =='POLL' "  >
          <h1>{{chat.poll}}</h1>
          <div> 
            <ion-button  (click)="opinionClick('yes',chat.id)" >{{chat.option1}}:{{chat.countoption1}}</ion-button>
           <ion-button  (click)="opinionClick('no',chat.id)" >{{chat.option2}} :  {{chat.countoption2}}  </ion-button> 
         </div>
        </div>
        </div>
        <div class="you" *ngIf = "uid!=chat.UserID">
          <span class="name">{{chat.Name}}</span>
         <br> {{chat.Message}}
        <div class="name" *ngIf = "chat.Message =='POLL'" >
          <h1>{{chat.poll}}</h1>
            <div  > 
             <ion-button  (click)="opinionClick('yes',chat.id)" >{{chat.option1}}: {{chat.countoption1}}</ion-button>
            <ion-button  (click)="opinionClick('no',chat.id)" >{{chat.option2}}:  {{chat.countoption2}} </ion-button> 
          </div>
        </div>
      </div>
    </div>
  </ion-content>

Enter fullscreen mode Exit fullscreen mode

image

I know I'm bad at selecting the palette.

Aniyooo 💕

Discussion (0)