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 đź’•

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay