src/app/app-poll/app-poll.component.ts
selector | app-poll |
styleUrls | ./app-poll.component.less |
templateUrl | ./app-poll.component.html |
Properties |
Methods |
Inputs |
constructor(store: Store
|
||||||
Defined in src/app/app-poll/app-poll.component.ts:27
|
||||||
Parameters :
|
name
|
Type : |
Defined in src/app/app-poll/app-poll.component.ts:26
|
poll
|
Type : |
Defined in src/app/app-poll/app-poll.component.ts:25
|
ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Defined in src/app/app-poll/app-poll.component.ts:18
|
||||||
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/app-poll/app-poll.component.ts:50
|
Returns :
void
|
update | ||||||
update(event: Event)
|
||||||
Defined in src/app/app-poll/app-poll.component.ts:74
|
||||||
Parameters :
Returns :
void
|
vote | |||||||||
vote(event: ElementRef, index: number)
|
|||||||||
Defined in src/app/app-poll/app-poll.component.ts:56
|
|||||||||
Parameters :
Returns :
any
|
data |
data:
|
Type : any
|
Defined in src/app/app-poll/app-poll.component.ts:23
|
errorMessage |
errorMessage:
|
Type : string
|
Default value : ''
|
Defined in src/app/app-poll/app-poll.component.ts:27
|
todaysPoll |
todaysPoll:
|
Type : AppPoll
|
Defined in src/app/app-poll/app-poll.component.ts:24
|
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;
}