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;
  bgColor?: 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