DEV Community

Kamana
Kamana

Posted on

1 1

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 💕

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

DEV works best when you're signed in—unlocking a more customized experience with features like dark mode and personalized reading settings!

Okay