Star Rating in ionic 4

@prabhashi1 wrote:

Hi,

I’m new to ionic frame work. I need to create an app with customer rating page. so far I refer some articles and couldn’t get an idea. Here’s my scss and html files. I’m looking for help to my ts code
html file

<ion-header>
    <ion-toolbar>
      <ion-title align="center" style="color:white">
        GET-METER
      </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content padding>
  <form #form="ngForm">
    <div>
        <div align = "center" style="margin-top: 3%">
            <ion-label position="floating" id="dheading" style="margin-top:5%;font-size: x-large;color:white"> Customer Rating</ion-label>
        </div>
       
        <div style="margin-top: 10%">
          <rating [rate]="rate" readonly="false"  size="default" (rateChange)="onRateChange($event)">
          </rating>
        </div>
        

        

  
       
         

       
    </div>
  </form>
</ion-content>

and scss file

<ion-header>
    <ion-toolbar>
      <ion-title align="center" style="color:white">
        GET-METER
      </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content padding>
  <form #form="ngForm">
    <div>
        <div align = "center" style="margin-top: 3%">
            <ion-label position="floating" id="dheading" style="margin-top:5%;font-size: x-large;color:white"> Customer Rating</ion-label>
        </div>
       
        <div style="margin-top: 10%">
          <rating [rate]="rate" readonly="false"  size="default" (rateChange)="onRateChange($event)">
          </rating>
        </div>
        

        

  
       
         

       
    </div>
  </form>
</ion-content>

ts file

import { Component,Input, Output, EventEmitter,OnInit } from '@angular/core';

@Component({
  selector: 'app-customer-rate',
  templateUrl: './customer-rate.page.html',
  styleUrls: ['./customer-rate.page.scss'],
})
export class CustomerRatePage implements OnInit {

  constructor() { }

  @Input() rating: number;
  @Input() itemId: number;
  @Output() ratingClick: EventEmitter<any> = new EventEmitter<any>();

  inputName: string;
  ngOnInit() {
    this.inputName = this.itemId + '_rating';
  }
  onClick(rating: number): void {
    this.rating = rating;
    this.ratingClick.emit({
      itemId: this.itemId,
      rating: rating
    });
  }

}

Posts: 1

Participants: 1

Read full topic