Vídeo Tutorial — Criando um componente customizado — Ionic 2

Em vários projetos que trabalhei precisamos criar componentes customizados. Para quem está familiarizado com o Angular 1 é semelhante a uma Diretiva que vira uma tag HTML.

Existe uma linha tênue entre fazer componentes ou copiar o código. Você deve prestar muita atenção nisso, pois pode ser que depois de N componentes criados você chegue no ponto que carinhosamente chamo de “Component HELL”.

“Eu crio um componente que agrega 3 componentes e cada componente tem mais 3 componentes dentro”.

Ou seja, ao invés de facilitar o seu trabalho, você está criando um monstro que obrigatoriamente vai te dar mais trabalho do que a própria demanda. Falo isso, pois já passei por isso em alguns projetos tempos atrás (era com Java JSF e Facelts)

O que vamos fazer hoje é criar um novo componente para o demo para o componente da documentação do Ionic 2 será transformado em uma tag <social-card> ao invés de todo o código abaixo:

<ion-card>

  <ion-item>
    <ion-avatar item-start>
      <img src="img/marty-avatar.png">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>

  <ion-row>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      </ion-note>
    </ion-col>
  </ion-row>

</ion-card>

Segue o vídeo: