ng-voting

NgVoting

ng-voting is a reusable Angular component that can be used to easily implement a voting platform in your app. It is responsive and completely customizable.

Demo

Table of Contents

• Installation
• Usage
• Customize
• API
• Whats next
• Author

Installation

npm i ng-voting

Usage

• Import the NgVotingComponent in the module of your choice.

...
import { NgVotingComponent } from 'ng-voting'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    NgVotingComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• In your.component.ts add some data of type Voting. can be import like import { Voting } from ng-voting
• In your.component.html add the ng-voting tag and pass you data of type Voting to [data] as shown below.

your.component.ts

import { Voting } from 'ng-voting';

@Component({
  selector: 'your-root',
  templateUrl: './your.component.html'
})
export class YourComponent {
  data: Voting =  {
    question: "Do you like ng-voting?",
    options: [
        {
            label: "Yes",
            value: "yes",
            votesCount: 1,
            imageUrl: "optional-image-url",
            users: [
              ...users,
              {
                name: "John Snow",
                image: "assets/profile1.jpg"
              },
            ]
        },
        {
            label: "No",
            value: "no",
            votesCount: 0,
            imageUrl: "optional-image-url"
        }
    ]
  }

  optionSelected(value: string) {
    // You get back the selected option here.
  }

your.component.html

<ng-voting 
    [data]="data" (selected)="optionSelected($event)"></ng-voting>

Voting

export interface Voting {
    question: string,
    options: Option[]
}

export interface Option {
    label: string,
    value: string,
    votesCount: number,
    imageUrl?: string,
    users?: {name: string, image?: string}[],
    color?: string,
    selected?: boolean,
}

Customize

• The component can be completely customized, from adding background colors, font sizes to modifying the margins
• Import the StyleParams like import { StypeParams } from 'ng-voting', and create and object.
• Pass the object to [styleParams] in your html. (use rem instead of px)

// In your .ts file, create an object and change these values
// (use `rem` and not `px`)

styleParams: StyleParams = {
    borderColor: '#d3d3d3',
    margin: '1rem',
    hoverColor: '#ebebeb',
    scaleColor: '#9797dc',
    fontSize: '1.5rem',
    topicBackgroundColor: '#ffffff',
    optionsBackgroundColor: '#ffffff',
    topicFontColor: 'black',
    optionsFontColor: 'black'
}

// In your html file, pass that object.
<ng-voting 
        [data]="data" 
        [styleParams]="styleParams"
        (selected)="increaseVoteCount($event)"></ng-voting>

API

API	Type	Description	Default	Required
[data]	Voting	Voting topic and option and their details	undefined	true
[isLoading]	boolean	Show loading state	false	false
[showUsers]	boolean	Show the users count on option	true	false
[showScale]	boolean	Show the percentage scale of voting	true	false
[disable]	boolean	Disable voting	false	false
[selectedOptionValue]	boolean	Shows a checkmark of which option was selected by user	""	false
[styleParams]	StyleParams	Customize the Voting component.	borderColor: '#d3d3d3', margin: '1rem', hoverColor: '#ebebeb', scaleColor: '#9797dc', fontSize: '1.5rem', topicBackgroundColor:'#ffffff', optionsBackgroundColor:'#ffffff', topicFontColor: 'black', optionsFontColor: 'black'	false
(selected)	string	Emits the selected option value

• Example usage

<ng-voting 
        [data]="data" 
        [styleParams]="styleParams" 
        [showScale]="true" 
        [showUsers]="true" 
        [isLoading]="false"
        [selectedOptionValue]="''"
        [disable]="false"
        (selected)="handleVote($event)"></ng-voting>

Whats next

• A customization app, where you can try out the component and generate the code for it.
• More reusable components.

Author

• @jeetadhikari92