andrucz / Ionic2 Rating
Licence: mit
⭐️ Angular star rating bar. Built for Ionic 2+.
Stars: ✭ 177
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ionic2 Rating
ionic-uuchat
基于ionic3,angular4的实时聊天app,兼容web端。该项目只是前端部分,所有数据需要请求后端服务器,需要配套express-uuchat-api使用。
Stars: ✭ 14 (-92.09%)
Mutual labels: ionic, angular2, angular4, ionic2
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-87.57%)
Mutual labels: ionic, angular2, angular4, ionic2
angular-progress-bar
This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
Stars: ✭ 26 (-85.31%)
Mutual labels: ionic, angular2, angular4, ionic2
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+203.39%)
Mutual labels: ionic, ionic2, angular2, angular4
Ionic3 Components
A project full of ionic 3 components and samples - to make life easier :)
Stars: ✭ 1,689 (+854.24%)
Mutual labels: ionic, ionic2, angular2, angular4
Ionic2 Pokedex
🎮 Pokédex sample app developed with Ionic 2, Angular 2 and Apache Cordova. Using Pokéapi as source for data.
Stars: ✭ 143 (-19.21%)
Mutual labels: ionic, ionic2, angular2, angular4
Dianoia-app
Mobile (Ionic 3 - Angular 4) app about non-pharmaceutical activities and information for people with dementia.
Stars: ✭ 13 (-92.66%)
Mutual labels: ionic, angular2, angular4, ionic2
Ionic2 Reddit Reader
Ionic 2 Sample App
Stars: ✭ 128 (-27.68%)
Mutual labels: mobile, ionic, ionic2, angular2
Growth Ionic
[v2.0 DEPRECATED, please update to Growth 3.0] Growth - App to help you Be Awesome Developer & Awesome Hacker
Stars: ✭ 2,200 (+1142.94%)
Mutual labels: ionic, ionic2, angular2
Wooionic3
An eCommerce App for WooCommerce stores using Ionic 3.
Stars: ✭ 208 (+17.51%)
Mutual labels: ionic, ionic2, angular4
ionic3-image-handling
In this ionic tutorial you will learn how to access the image gallery and take pictures from an ionic app. Also we will show you how to add a image cropper. This ionic tutorial includes a working ionic app example you can reuse for your needs.
Stars: ✭ 35 (-80.23%)
Mutual labels: ionic, angular4, ionic2
ionic-video-chat-support
Ionic 3 Video and Group Text Chat
Stars: ✭ 19 (-89.27%)
Mutual labels: ionic, angular2, ionic2
Ngx Facebook
Angular TypeScript Wrapper for Facebook SDK
Stars: ✭ 214 (+20.9%)
Mutual labels: ionic2, angular2, angular4
Ionic Audio
An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
Stars: ✭ 332 (+87.57%)
Mutual labels: ionic2, angular2, angular4
Drip Ionic3
「水滴打卡」App Open Source Code Base On Ionic V3 Framework
Stars: ✭ 74 (-58.19%)
Mutual labels: ionic2, angular2, angular4
Ng Lottie
Render After Effects animations on Angular based on lottie-web
Stars: ✭ 311 (+75.71%)
Mutual labels: ionic, angular2, angular4
Ion Digit Keyboard V2
A digital keyboard plugin to use in Ionic 2 applications.
Stars: ✭ 97 (-45.2%)
Mutual labels: ionic, ionic2, angular2
Chihu2
ionic2-example <吃乎2>混合开发-美食app 🍜 ☕️ 🍦 (This is a support android and apple ionic2 case, a food app)
Stars: ✭ 124 (-29.94%)
Mutual labels: ionic, ionic2, angular4
Ng2 Search Filter
Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, 🔥 100K+ downloads
Stars: ✭ 137 (-22.6%)
Mutual labels: angular2, angular4
Ionic3 Multilevelsidemenu
Ionic 3 demo of a two-level side menu.
Stars: ✭ 141 (-20.34%)
Mutual labels: ionic, ionic2
ionic2-rating
Angular 4 (formerly Angular 2) star rating bar, built for Ionic 2+.
How to install:
$ npm install --save ionic2-rating
How to use:
Import Ionic2RatingModule
on module definition that declares the page where you want to add the rating component. In some cases, all pages are declared on src/app/app.module.ts
.
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
// Import ionic2-rating module
import { Ionic2RatingModule } from 'ionic2-rating';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp),
Ionic2RatingModule // Put ionic2-rating module here
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: []
})
export class AppModule {}
If you are using Lazy Loading
in your application, add the Ionic2RatingModule
to the page module instead of the app module.
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilePage } from './profile';
import { Ionic2RatingModule } from "ionic2-rating";
@NgModule({
declarations: [
ProfilePage,
],
imports: [
IonicPageModule.forChild(ProfilePage),
Ionic2RatingModule // Put ionic2-rating module here
],
exports: [
ProfilePage
]
})
export class ProfilePageModule { }
Include the component on page template, like the example below:
<rating [(ngModel)]="rate"
readOnly="false" <!--default value-->
max="5" <!--default value-->
emptyStarIconName="star-outline" <!--default value-->
halfStarIconName="star-half" <!--default value-->
starIconName="star" <!--default value-->
nullable="false" <!--default value-->
(ngModelChange)="onModelChange($event)"> <!--use it when you need to do something when user clicks on a star. in case you only need to change ngModel property, this property can be ommited.-->
</rating>
You may also need to customize component styles:
ul {
padding: 0px;
&.rating li {
padding: 5px 10px !important;
background: none;
color: #ffb400;
ion-icon {
font-size: 30px;
}
}
}
Based on ionic-rating for Ionic 1: https://github.com/fraserxu/ionic-rating
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].