Component problem called expendable in Ionic 3

Question

Guys, I really need your help. According to this tutorial tutorial I need a custom component that displays the following error:

"Can’t bind to 'expandHeight' Since it isn’t a known Property of 'Expandable'."

when I run my app.

In my case "home.html" is "rate-fire.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 of fire.scss:

    .ios, .md{
    page-taxa-incendio {
        button{
            align-items: baseline;
        }
    }
}

NOTE: I 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;
    }

}

Error screen html

Error screen app

Answer 1

In his home.html you called by the Exp selectortondable, but in their expendable.ts vc declared the selector as Expandndable.

Switch to

<expendable [expandHeight]="itemExpandHeight" [expanded]="item.expanded">
        Hello people
</expendable>