People, I really need your help. According to this tutorial tutorial I need a custom component that displays the following error:
"Can not bind to 'expandHeight' since it is not a known property of 'expandable'."
When I run my app.
In my case "home.html" is "fire-rate.html". Here it is:
<ion-list>
<button detail-none (click)="expandItem(item)" ion-item *ngFor="let item of items">
<ion-thumbnail item-start>
<img src="assets/imgs/bolacha.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
**<expandable** [expandHeight]="itemExpandHeight" [expanded]="item.expanded">
Hello people
**</expandable>**
<button ion-button clear item-end>View</button>
</button>
</ion-list>
My rate-fire.ts:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the TaxaIncendioPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-taxa-incendio',
templateUrl: 'taxa-incendio.html',
})
export class TaxaIncendioPage {
items: any = [];
itemExpandHeight: number = 100;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.items = [
{expanded: false},
{expanded: false},
{expanded: false},
{expanded: false},
{expanded: false},
{expanded: false},
{expanded: false},
{expanded: false},
{expanded: false}
];
}
expandItem(item){
this.items.map((listItem) => {
if(item == listItem){
listItem.expanded = !listItem.expanded;
} else {
listItem.expanded = false;
}
return listItem;
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad TaxaIncendioPage');
}
exibir(item)
{
item.styleClass = (Number(item.styleClass) == 1)?0:1;
}
}
My rate-fire.scss:
.ios, .md{
page-taxa-incendio {
button{
align-items: baseline;
}
}
}
NOTE: I have circled the error with ** **.
My expendable.ts:
import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
/**
* Generated class for the ExpendableComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
@Component({
selector: 'expendable',
templateUrl: 'expendable.html'
})
export class ExpendableComponent {
text: string;
@ViewChild('expandWrapper', {read: ElementRef}) expandWrapper;
@Input('expanded') expanded;
@Input('expandHeight') expandHeight;
constructor(public renderer: Renderer) {
console.log('Hello ExpendableComponent Component');
this.text = 'Hello World';
}
ngAfterViewInit(){
this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');
}
}
My expandable.html:
<!-- Generated template for the ExpendableComponent component -->
<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
<ng-content></ng-content>
</div>
My expandable.scss:
expandable {
.expand-wrapper {
transition: 0.2s linear;
}
.collapsed {
height: 0 !important;
}
}
