Transform Word into Icon in Angular - html

Question

I'm have a page that the footer contains a lot of info of a gym, Contact, Location etc...
The gym i picked for example contains 5 means of contact, that are:
Commercial Phone
Whatsapp
Instagram
Facebook
Email
This is how the json look like:
"ExibirContatos": [
{
"ID_TipoContato": "2",
"TipoDescricao": "Telefone comercial",
"Contato": "(31)2523-0672"
},
{
"ID_TipoContato": "9",
"TipoDescricao": "Whatsapp",
"Contato": "(31)98428-6287"
},
{
"ID_TipoContato": "5",
"TipoDescricao": "Instagram",
"Contato": "#br_fit_"
},
{
"ID_TipoContato": "7",
"TipoDescricao": "Facebook",
"Contato": "https://www.facebook.com/brfitbh/"
},
{
"ID_TipoContato": "4",
"TipoDescricao": "E-mail",
"Contato": "contato#brfitbh.com.br"
}
]
TS:
import {HttpClient} from '#angular/common/http';
import { Academia } from '../../classes/academia';
interface AcademiaRequest {
ACADEMIA_INFO: any;
}
export class HomePageComponent implements OnInit {
academia: Academia = new Academia();
constructor(private http: HttpClient) {}
ngOnInit() {
this.receberAcademia(this.academia);
}
receberAcademia(academia) {
this.http
.get<AcademiaRequest>(
'http://fitgroup.com.br/vysor_vendas_online/fg_vendas.php?AuthToken=FlnPoU230xGF&Metodo=academiaLoad&IDCliente=000949'
)
.subscribe(response => {
academia.nome = response.ACADEMIA_INFO.AcademiaDados.NomeAcademia;
academia.rua = response.ACADEMIA_INFO.AcademiaDados.EnderecoLogradouro;
academia.numero = response.ACADEMIA_INFO.AcademiaDados.EnderecoNumero;
academia.cep = response.ACADEMIA_INFO.AcademiaDados.EnderecoCEP;
academia.cidade = response.ACADEMIA_INFO.AcademiaDados.EnderecoCidade;
academia.estado = response.ACADEMIA_INFO.AcademiaDados.EnderecoUF;
academia.contatos = response.ACADEMIA_INFO.VendasOnline.ExibirContatos;
});
}
}
Academia Class:
export class Academia {
registros: number;
nome: string;
// Endereço
rua: string;
numero: string;
cep: string;
cidade: string;
estado: string;
// Contato
contatos: any[];
}
And for last, my HTML:
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 ml-4 font-weight-bold">
CONTATO:
</h5>
<ul class="f-address">
<li *ngFor="let contatos of academia.contatos">
<p> {{contatos.TipoDescricao }}: {{ contatos.Contato }} </p>
</li>
</ul>
</div>
It's printing something like that:
But i don't want the name of the contact, i don't want "Telefone Comercial:", "Whatsapp" and etc... I want these names to be replaced by icons, fontawesome icons, these icons respectively:
<i class="fas fa-phone-alt"></i>
<i class="fas fa-whatsapp"></i>
<i class="fas fa-instagram"></i>
<i class="fas fa-facebook"></i>
<i class="fas fa-envelope"></i>
But i don't have any ideas how to do such a conversion, i even have thinked in this code:
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 ml-4 font-weight-bold">
CONTATO:
</h5>
<ul class="f-address">
<li *ngFor="let contatos of academia.contatos">
<p> <i class="fas {{ contatos.TipoDescricao }}"></i> {{ contatos.Contato }} </p>
</li>
</ul>
</div>
But first i need to convert to the rest of the icon's name "fa-icon_name", how can i do that? Please help me!!

Answer 1

I can see two ways to solve this:
1 - Create a method to get the icon correspondent to the description, but it would impact the performance as it would be called on every change.
2 - Create a pipe, which is the recommended way:
import { Pipe, PipeTransform } from '#angular/core';
// Note that I have used Font Awesome 5.x for this demo.
const descriptionIconClassMapper = {
'E-mail': 'fas fa-envelope',
'Telefone comercial': 'fas fa-phone-alt',
Facebook: 'fab fa-facebook',
Instagram: 'fab fa-instagram',
Whatsapp: 'fab fa-whatsapp'
};
#Pipe({
name: 'descriptionToIconClass'
})
export class DescriptionToIconClassPipe implements PipeTransform {
transform<T extends keyof typeof descriptionIconClassMapper>(
description: T
): typeof descriptionIconClassMapper[T] {
return descriptionIconClassMapper[description];
}
}
And in HTML:
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 ml-4 font-weight-bold">
CONTATO:
</h5>
<ul class="f-address" *ngIf="academiaInfo$ | async as academiaInfo">
<li *ngFor="let contato of academiaInfo.VendasOnline.ExibirContatos">
<p><i class="mr-1" [ngClass]="contato.TipoDescricao | descriptionToIconClass"></i>{{ contato.Contato }}</p>
</li>
</ul>
</div>
Some tips:
1 - Do not call http requests directly from components. Create a service to wrap this;
2 - Instead of subscribe, prefer to use async pipe for GET requests;
3 - Instead of using any, you can use a tool to generate typescript interfaces from a JSON, like http://jsontots.com.
4 - Unless you have a good reason to use class, prefer interfaces, as it wouldn't affect build size.
5 - See the DEMO :)

Answer 2

You can use a pipe to achieve that. Create a pipe that takes your contatos.TipoDescricao as an input and returns the matching icon for that.
#Pipe({
name: 'descriptionToIcon'
})
export class DescriptionToIconPipe implements PipeTransform {
private static readonly iconsForDescriptions:Array<{desc:string, icon:string}> = [
{desc: 'Telefone comercial', icon: 'fa-phone-alt'},
// Add all other texts and icons as pairs as well
]
transform(value: any, args?: any): any {
return DescriptionToIconPipe.iconsForDescriptions.find(item => item.desc === value).icon;
}
}
And in your HTML
<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
<h5 class="mb-4 ml-4 font-weight-bold">
CONTATO:
</h5>
<ul class="f-address">
<li *ngFor="let contatos of academia.contatos">
<p> <i class="fas {{ contatos.TipoDescricao | descriptionToIcon}}"></i> {{ contatos.Contato }} </p>
</li>
</ul>
</div>