File

src/app/app-poll/app-poll.component.ts

Implements

OnInit OnChanges

Metadata

selector app-poll
styleUrls ./app-poll.component.less
templateUrl ./app-poll.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(store: Store)
Parameters :
Name Type Optional
store Store<any> No

Inputs

name

Type : string

poll

Type : AppPoll

Methods

ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnInit
ngOnInit()
Returns : void
update
update(event: Event)
Parameters :
Name Type Optional
event Event No
Returns : void
vote
vote(event: ElementRef, index: number)
Parameters :
Name Type Optional
event ElementRef No
index number No
Returns : any

Properties

data
data: any
Type : any
errorMessage
errorMessage: string
Type : string
Default value : ''
todaysPoll
todaysPoll: AppPoll
Type : AppPoll
import { Component, OnInit, Input} from '@angular/core';
import {ChartModule} from 'primeng/chart';
//import { PollService } from './app-poll.service';
import { AppPoll } from './app-poll';
import { ElementRef } from '@angular/core';
import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';
import { SimpleChanges } from '@angular/core';
import { Store } from '@ngrx/store';
import { PollActionTypes } from 'src/app/app-poll/state/poll.actions';
import { AppPollResult } from 'src/app/app-poll/app-poll-result';

@Component({
  selector: 'app-poll',
  templateUrl: './app-poll.component.html',
  styleUrls: ['./app-poll.component.less']
})
export class AppPollComponent implements OnInit, OnChanges {
    ngOnChanges(changes: SimpleChanges): void {
        //getPollResult( this.poll.id);

        console.log("Method not implemented.");
    }
  data: any;
  todaysPoll: AppPoll;
  @Input() poll: AppPoll;
  @Input() name: string;
  errorMessage = '';
  
//constructor(private pollService: PollService) {
    constructor(private store : Store<any>) {
    this.data = {
          labels: ['A','B','C'],
          datasets: [
              {
                  data: [300, 50, 100],
                  backgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                  ],
                  hoverBackgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                  ]
              }]    
          };
}

ngOnInit() {
   // this.pollService.getPolls()
    // .subscribe(
    //     polls => this.polls = polls,
    //     error => this.errorMessage = <any>error)
       }
vote(event: ElementRef, index: number): any{
        console.log(index);
        const pollState : AppPollResult = {
            id: 0,
            votesCount : 0,
            options : [{
                id: index,
                count:100
            }]
            }

        this.store.dispatch({
            type: PollActionTypes.ToggleVote,
            payload: pollState
        })
    }
    

update(event: Event) {
  //this.data = //create new data
}


}
<div class="row">
        <div class="col-sm-12">
            <h1>{{poll?.title}}</h1>
        </div>
</div>
<div class="row">
        <div class="col-sm-12 text-right">
            <h5 *ngIf="poll">Published date: {{poll?.publishedDate | date :'medium'}}</h5>
        </div>
</div>
<div class="jumbotron" class="padding-1-2">
    <section *ngIf="true" class="container-fluid center poll-center">
        <div class="row">
            <div class="col-sm-3">
                <div *ngIf="poll?.answer.type == 'Single'">
                    <div *ngFor="let option of poll.answer.options; let i = index"
                    class="m-1"
                    (click)="vote($event, i)">
                        <button type="button" class="m-w-17"
                        [ngClass]="{
                            'btn btn-success': i == '0',
                            'btn btn-danger': i == '1'}">{{option.label}}
                        </button>                        
                        <!-- This also works, another way of ngClass

                             <button type="button" class="m-w-17"
                            [ngClass] = "i==0 ? 'btn btn-success': 'btn btn-danger' ">
                            {{option.label}}</button> -->
                    </div>
                 </div>
            </div>
                <div class="col-sm-6">
                    <p-chart type="doughnut" [data]="data"  width="30vw" height="36vh"></p-chart>
                    <button type="button" pButton (click)="update($event)"></button>
                </div>
                <div class="col-sm-3"></div>
                  </div>
                  <div class="row">
                      Total number of votes recorder: 100
                  </div>             
        </section>
      </div>

./app-poll.component.less

//  @import "./bootstrap/dist/css/bootstrap.css"
.m-1{
    margin-top: 1px;
    margin-bottom: 1px;   
}
.m-w-17{
min-width: 17%;
}

.padding-1-2{
padding:1rem 2rem;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""