Customizing the Posts section

< Applying Customizations page

This Wiki page will lead you through the customization of the Posts section. In case of issues, feel free to enter in our community on and post your questions.

Posts component customizations

The entire code that belongs to the Posts component can be found here:

/src/app/posts

Component schema

The Posts component files are based on the schema below:

File	Description
posts.molule.ts	A @NgModule used to encapsulation
posts-interfaces.ts	Contains the interfaces used to standardize inputs
posts.component.html	Contains the view template
posts.component.scss	Contains the styles
posts.component.responsivity.scss	Contains the responsive styles
posts.component.ts	Contains the component's logic

Understanding the component structure

The Posts section is built dynamically, in case of keeping the original structure, no coding is required. For content customization, it is only required a few changes on the posts.json file.

In order to avoid issues and re-work, make sure to understand the JSON file data structure in the next topics.

Understanding each interface

The Posts component uses the posts-interfaces.ts in order to standardize the inputs coming from the src/assets/data/posts.json. Below, it's described the structure of each property in the IPost interface.

Property Name	Type	Is Mandatory	Description
thumbnail	String	✔️	The thumbnail picture of the post
http	String	✔️	The URL of the post
date	String	✔️	The date of the post
internationalization	IPostInternationalization	✔️	Array of IPostInternationalization

IPostInternationalization interface properties

The table below describes the properties of the IPostInternationalization interface:

Property Name	Type	Description
language	String	Must contain a valid LOCALE_ID value
title	String	The post title description per language
description	String	The post text description per language

Preview & JSON example

{
    "thumbnail": "https://assets.guilhermeborgesbastos.com/live-resume/posts/post-05-21-2016.jpg",
    "http": "https://www.linkedin.com/pulse/push-notification-para-android-totorial-open-source-borges-bastos/",
    "date": "05-21-2016",
    "internationalizations": [
        {
            "language": "en",
            "title": "Push Notification for Android - <i>Open-source component</i>.",
            "description": "A complete component for those who need a deck of dynamic cards with interactive charts for Android. Much like what we found in <i>Tinder</i>. Fully open-source for changes and improvements."
        },
        {
            "language": "pt",
            "title": "Notificação de usuário no Android - <i>Componente de código aberto</i>.",
            "description": "Um componente completo para quem precisa de um baralho de cartas dinâmicas com gráficos interativos para Android. Muito parecido com o que encontramos em <i> Tinder </i>. Código-fonte totalmente aberto para alterações e melhorias."
        }
    ]
}