I'm using ion-slides as the following:
<div *ngFor="let category of categories">
<h6 class="slide-title" [innerHTML]="category.name"></h6>
<ion-slides [loop]="true" [pager]="true" [slidesPerView]="3">
<ion-slide *ngFor="let product of category.products">
<img [src]="product.image" class="slide-image">
</ion-slide>
</ion-slides>
</div>
I'm getting the following error:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'slidesPerView' since it isn't a known property of 'ion-slides'.
If 'ion-slides' is an Angular component and it has 'slidesPerView' input, then verify that it is part of this module.
If 'ion-slides' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
("h6 class="slide-title" [innerHTML]="category.name">
][slidesPerView]="3">
<img [src]="product"): MainPage#12:43 ; Zone: ; Task: Promise.then ; Value: ....
can anyone help please.
ionic -v
2.2.1
cordova -v
6.5.0
Recently there was some changes in ion-slides. Make sure you have the latest ionic version (2.0.0).
Also you can use slidesPerView without enclosing it in square brackets as follows
<ion-slides pager loop slidesPerView="3">
<ion-slide>
...
</ion-slide>
<ion-slides>
Related
<button click-stop-propagation="" mat-button="" class="mat-button" ng-reflect-disabled="true" disabled="">
<span class="mat-button-wrapper">
<i class="icon icon-md delete-icon"></i>
<span>Delete</span>
</span>
<div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="true" ng-reflect-trigger="[object HTMLButtonElement]"></div>
<div class="mat-button-focus-overlay"></div>
</button>
I want to find grand parent of icon icon-md delete-icon which is mat-button is there any way in protractor to do that, I want to avoid using xPaths.
I know that using xpaths I can do that element(by.css('.icon.delete-icon')).element(by.xpath('../..')); is there any way by which I can identify it using CSS ??
I am trying to load data from a http call into a select as per the code below.
<ion-select [(ngModel)]="dealer">
<ion-option *ngFor="let dealerDetails of dealers">{{dealerDetails.name}}</ion-option>
</ion-select>
This returns
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ion-option' is not a known element:
1. If 'ion-option' is an Angular component, then verify that it is part of
this module.
2. If 'ion-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to
the '#NgModule.schemas' of this component to suppress this message. ("
I have tried the # instead of the let to no avail.
also this code works perfectly for the list as per below code:
<ion-list>
<ion-item *ngFor="let dealerDetails of dealers">{{dealerDetails.name}}</ion-item>
</ion-list>
I'm new to Angular Material Here i have mention Image of What Actually i Need?
I don't how to split row in card
Check out this,
Here i tried angular material card, Click Here to see.
<mat-card class="example-card">
<mat-card-content>
<img mat-card-image src="https://image4.geekbuying.com/ggo_pic/2016-08-30/2016083001543551umb5a0d.jpg" alt="Photo of a Shiba Inu" style="width:100px; float:left; height:100px">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-subtitle>Headphones</mat-card-subtitle>
<mat-card-title>Xiaomi Redmi Note 4</mat-card-title>
</mat-card-header>
<br>
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>$225</mat-card-title>
</mat-card-header>
</mat-card-content>
</mat-card>
I need to figure out a way to add information from sibling pages to my template file
Here is an image of the file structure (the red items are the siblings whos info I need to access inside my template):
Here is the tpl file code that I am using:
[[+total:isequalto=`1`:then=`<div class="equalHeightListItem full_width[[+idx:isequalto=`1`:then=` column-last`]]">`:else=``]][[+total:isequalto=`2`:then=`<div class="equalHeightListItem one_half[[+idx:isequalto=`2`:then=` column-last`]]">`:else=``]][[+total:isequalto=`3`:then=`<div class="equalHeightListItem one_third[[+idx:isequalto=`3`:then=` column-last`]]">`:else=``]][[+total:isequalto=`4`:then=`<div class="equalHeightListItem one_half[[+idx:isequalto=`2`:then=` column-last`]][[+idx:isequalto=`4`:then=` column-last`]]">`:else=``]]
<figure class="projectImg bwWrapper icon-box7">
<a href="[[~[[+id]]]]">
<div class="operations productImage" style="max-width: 100%; background-image: url('[[+tv.products.category.img]]')"></div>
</a>
<div class="projectDesc equalHeightListItemInner operations">
<h4>[[+menutitle:default=`[[+pagetitle]]`]]</h4>
<p>[[+introtext]]</p>
<div>Read More</div>
<!-- I need to add sibling info here -->
</div>
</figure>
</div>
Any help is greatly appreciated.
I use pdoResources (which similar to getResources, but faster). Place this code in instead <!-- I need to add sibling info here --> and this is would help.
[[pdoResources?
&parents=`[[+id]]`
&depth=`1`
&tpl=`your_sibling_row_tpl`
]]
How can I use ngModel for inputs across multiple forms that's repeated by ngFor?
Angular2 gives me error when I'm trying to do so.
Error: Permission denied to access property "rejection"
Example block of problematic code:
<div *ngFor="let item of items">
<form name="itemForm">
{{item.name}}<input [(ngModel)]="item.name">
</form>
</div>
Here is the plunker
https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview
If I remove the form tag, it all run without problem, but I need it so I can use enter key on all input to update corresponding data in their own form.
If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
Below will work without any error :
<div *ngFor="let item of items">
<form name="itemForm">
{{item.name}}<input [(ngModel)]="item.name" [ngModelOptions]="{standalone: true}">
</form>
</div>
As pointed out by #ranakrunal9 you can use a unique name attribute for your input. Here the code:
<div *ngFor="let item of items; let index=index">
<form name="itemForm">
{{item.name}}<input [(ngModel)]="item.name" name={{index}}>
</form>
</div>