Updates on dev.to clone in Angular July 23

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week I added Article store and sidebar in our dev.to clone.

This week I added the articles section. The articles section is divided into three parts the featured article ie the first article in your feed the rest of the articles section and the top header from where I select the time interval of our feed. Right now the feed is generic not based on any tags and user but I will do that later. Most of the time went in setting up the HTML, CSS for our articles section so I was not able to complete the tags store and the articles header section.

I did some interesting things which you may find interesting.

Content projection in the articles-cards section

In normal articles card the font size of title is 24px and in the featured-article section it was 30px. So I thought I should add the title section via content projection but this had one problem that there is no way in Angular to give default content projection the issue is open for a long time but there is a work around you can define a ref on the template and check if has children then render the projected content or render the default content if it does not have any content projected. To see how I implemented it follow this link.

Changing styles of component

So if you put some styles of your component in the :host selector it can be easily changed in other components too. Like the article card-component as some styles but with the featured card I need to change some styles of the card component. Most of the CSS I need to be changed is global so I put it in host of the article-card component and I was easily able to change the styles to see how I implemented this check this link.

Which leads us here