I am using ng2-ionic-rating plugin but it is giving error when I am building my apk using
ionic cordova build android --prod
the error is shown below
'rating' is not a known element: 1. If 'rating' is an Angular component,
then verify that it is part of this
module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the
'#NgModule.schemas' of this component. ("
<ion-card padding> <h1>Rate this App</h1> [ERROR ->]<rating
[(ngModel)]="rate" max="5"
emptyStarIconName="star-outline" halfStarIconName="star-half" ")
The html code is
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card padding>
<h1>Rate this App</h1>
<rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"
halfStarIconName="star-half" starIconName="star" nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
<ion-input [(ngModel)]="reason" placeholder="Please Give your reason">
</ion-input>
<button ion-button small round
(click)="resolveRec()">Feedback</button>
</ion-card>
</ion-content>
You should add Ionic2RatingModule to the imports array in app.module.ts.
If you are getting the same error again the reason is the version of Ionic2RatingModule is not supported. Try downgrading the version of Ionic2RatingModule to a miner version.
Working Example
Related
I'm using Ionic 4 and tab layout.
I have one tab page with QR Code Scanner. Hence the the page is set to transparent as below
<ion-content padding color="transparent">
<ion-item lines="none" class="top-content">
<ion-grid>
<ion-row>
<ion-col>
<ion-label text-center no-margin>
Scan QR Code to start
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
and have following interface
The second tab displays a list of items and thus have pull-to-refresh on the page. The code is
<ion-header>
<ion-toolbar color="primary">
<ion-title>Item List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher slot="fixed" (ionRefresh)="refreshList($event)">
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<ion-card color="primary" (click)="showAction(1)">
<ion-card-content>
<!-- item content -->
</ion-card-content>
</ion-card>
</ion-content>
But on pulling the page, it shows transparent background from the first page where the QR Code scanner has opened the camera and thus on pulling it shows camera output.
How can I close or hide page before opening a new page?
I employ an ionic range in my code with two icons at the beginning and the end. But these two icons didn't show up - only the range showed up. I have looked up their offcial document (https://ionicframework.com/docs/api/range) and here's my code (I basically copy their code):
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating"></ion-range>
<ion-icon slot="start" size="small" name="sad"></ion-icon>
<ion-icon slot="end" name="happy" ></ion-icon>
</ion-item>
Ionic document sometimes sucks and I really need someone to help me out.
You need to add icons inside ion-range tag and for the left icon add range-left attribute to the ion-icon tag and for the right icon add range-right attribute the icon as below.
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating">
<ion-icon range-left size="small" name="sad"></ion-icon>
<ion-icon range-right name="happy" ></ion-icon>
</ion-range>
</ion-item>
StackBlitz
I am showing below the two versions of ionic code that I have written. The one which uses ion-avatar doesn't seem to work but if I use item-avatar it does.
This one doesn't work
<ion-list inset>
<ion-item ng-repeat="leader in leaders" class="item item-text-wrap">
<ion-avatar item-left>
<img ng-src="{{baseURL+leader.image}}">
</ion-avatar>
<h2>{{leader.name}}<h2>
<h3>{{leader.designation}}</h3>
<p>{{leader.description}}</p>
</ion-item>
</ion-list>
This one works
<ion-list inset>
<ion-item ng-repeat="leader in leaders" class="item-avatar item-text-wrap">
<img ng-src="{{baseURL+leader.image}}">
<h2>{{leader.name}}<h2>
<h3>{{leader.designation}}</h3>
<p>{{leader.description}}</p>
</ion-item>
</ion-list>
While my code is fine and working, I am wondering why the first one doesn't work. I have ionic 2.2.1 installed.
Thanks and Regards
ion-avatar is implemented in ionic2 version where as item-avatar is ionic1 compatible.
You might be using ion-avatar in a v1 app that is the reason for error.
you can check official docs for list-item here
ionic-2
ionic v1
I have the following:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Add new</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="ion-backdrop" padding>
<form [formGroup]="form1" class="form" (ngSubmit)="onSubmit(form1.value)">
<ion-card>
<ion-list>
<ion-item>
<ion-label>Available:</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" formControlName="dateAvailableFormControl">
</ion-datetime>
</ion-item>
</ion-list>
</ion-card>
</form>
</ion-content>
and my ts code is:
this.dateAvailableFormControl.setValue(this.data.DateAvailable);
where this.data.DateAvailable is Date type.
I cannot see anything when page loads. All other bindings work fine except from the ion-datetime.
Does anyone knows why this happens?
Thanks in advance
I think I found what was the problem. Dont know if this is a bug of ionic 2 or is how it works with ng2.
My Date value was
2016-11-29T09:15:48.8579573Z
as soon as I change it to:
2016-11-29T09:15:48.857Z
it worked.
I am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (not exact same, however the important part is how to get that first block with such a picture and some text), with custom color for the entire toolbar etc?:
My application looks like following:
My app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
You can do it just adding some standard HTML code, and with CSS you can customize the style. Create the CSS Class rules in the .scss file. Rember to import
#import "build/app.html"; in the app.core.scss file. You'll find other information to personalize your app there
And for display the first block part you can add your code before the ion-list of the menu and after the tag <ion-content>.
You can delete this part, so it's more easy to create your custom layout.
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
The code will be:
<ion-menu [content]="content">
<ion-content>
<!--Here you can add all the code
you want, so you can display whatever you want-->
<!--Menu list-->
<ion-list class="menuList">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
If you need some more help, don't hesitate to ask.