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:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.