Component thinking in Angular

Fylo data storage component, challenge. Part 1

Nowadays, everything is thinking 🤔 or fullness 💭, we don’t want to be less.

Why such a cool title? Well, you still don’t know how difficult is thinking in components and how much time you can save if you sit down and wait for a bit having a thought about your tasks (before doing of course).

In this post, we look to educate ourselves when we start coding components. We will see some parts of the huge ecosystem around world of componentization in Angular

Introduction

What are the Best Ways to Teach Yourself to Code?

• Going to University & learning computational skills
• Reading a books
• Interactive tutorials, online courses & videos about coding
• Practice with personal projects
• Looking at someone else’s code
• Attend a coding bootcamp & going to a meet up

And after all, remember the most important Do It Yourself!!!

The other day, I landed into a really great website “Frontend Mentor” plenty of challenges to improve your skills (beginner, medium or advance) in different subjects…

Frontend Mentor | Front-end coding challenges using a real-life workflow

So there are homework for everybody. No excuses, choose one challenge just do it yourself…

Analyse the problem, design a solution, find hundreds of problems more and learn how to build a solution that fits the requirements…Next time, you will be able to address a better solution.

Indeed, I have chosen a challenge

Frontend Mentor | Fylo data storage component coding challenge

to prove & show you all some of the following skills:

• Smart & Dumb components in Angular with Input & Output/s (maybe other subjects such as HostBinding, HostListener …)
• Responsive components & Styling them with Sass, Flex & Grid

Frontend Mentor already give us the problem and solution, all in between to fit requirements is your tasks!!!

Challenge

Description to the problem

Solution

Solution for Desktop

Solution for Mobile

Mobile first

I am not going to have a philosophical discussion regarding to what approach is better, you can use whatever methodology you think is better.

However, I am going to start with Mobile First because from my experience is much better & easier to think in a small & minimalistic solution and then scale it through a more complex solution (which normally corresponds to the big one device, in that case Desktop.

Components

The very first thing I do is thinking in how many components can clearly exist in our app

Two main components in our mobile web app

Very obvious, there are two main components + background as well. The next step would be divide tasks according to your components

First component

Component 1 — Header / Navbar

Having a deeper look, I do try to identify which parts can be part of this components

Containers

Two main parts inside this component

Items

The question here is which content gives our app some meaning ( forget about style or shape …).

We identify 5 items in this container, however in terms of meaning 3 of them are practically the same.

Therefore, let’s say we have a logo, Fylo is the name of the company I guess. Also 3 icons which may link to another part in the app

Items in the first component

Icons (Part 1)

We can find exact the same icons in fontawesome, which is a great library. It is also available for Angular, yo use it open a shell

$ npm install --save @fortawesome/fontawesome-free

in angular.json

"styles": [
"src/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css"
],

and finally

<i class="fas fa-file"></i>

Anyway, I have already done this job and found these icons so…

https://fontawesome.com/icons/file https://fontawesome.com/icons/folder https://fontawesome.com/icons/cloud-upload-alt

https://fontawesome.com/icons/dragon

Well, I change our Logo for a Dragon, you may think I couldn’t find the right one and it might be true. However, I think 🤔 our Dragon is cooler.

Note 📝 : look up how you can do icons bigger

I’ll come back later to icons because we haven’t finished with them yet.

BEM or Similar

I encourage you to use BEM or similar, I am not a expert in this subject but it matters because give us our components more naming consistency. Once you learn these methodologies you will always use them.

A few helpful links should be mandatories here. I put below just in case you are completely lost

Code Style Guide

BEM and SASS: A Perfect Match

Angular :host, :host-context, ::ng-deep — The Complete Guide

Snapshot of template at this point, header.component.html

I don’t believe you can understand this!!! Note 📝 : :host is for scoping each component, so it acts like a invisible div & block in BEM, but is for a discussion in another post

I want to hear from other proposes…What is the approach you take? Do you use another methodology with Angular? Do you like mine?

Colors

They give us a style guide, so just pick up them and translate into Sass …

Colors in Sass, this way we can reuse them easily

Responsiveness with Flex

As long as our app is resized or has a bigger width with other kind of devices, these parts (as you can see below) will expand themselves. That’s why we call they are flexible

Note 📝 : the trick here is asking ourselves if it is expandable or flexible in only one direction, Axis horizontal or vertically or both. In that case, it is only in one so we will use Flex CSS as it is the best technology right now to do the job.

We don’t take 💯 % of the width because they leave an empty space on the right. header.component.scss

Style customisations

Border Radius allow us to paint these kind of borders just with one line of code. header.component.scss

Icons (Part 2)

I told you we will come back later on. The point here is that we need something else to fit the requirements of the icons…

Probably, you realise there is like a kind of shadow behind icons.

-(👨‍💻) — Okay, Does it mean we should have to create a new component??? —

-(🧔) — No worry, be happy… It does not really deserve to create a component for that. You can do it we just css or I will show a great technique to do that Directives —

We can achieve this shadow with directives in Angular, many other things can be done with directives... border.directive.ts

Just add our nice & great & cool appBorder directive as if it is a native html feature. app.component.ts

Final result

Look up what is the result of our code :) 🚀🚀🚀

I leave you here a Stackblitz for if you want to see code or just play with that

⤣ Repo at this point (StackBlitz OR GitHub on branch feature/header)⤤

✍ Conclusion ✍

Apart from the fact that we saw part of the huge Angular universe & ecosystem…

I conclude that the best way to learn absolutely is just do it by yourself. Face the problem, design a solution, implement & develop that solution to see what’s okay & wrong with every thing you did and iterate over that. In between, investigate, read and learn.

Frontend Mentor is such a great place to make yourself grow up professionally by allow you to improve your skills.

👣 Next Steps 👣

In this post we will solve a part of the challenge, I don’t want to get bored anyone who just has three free minutes a day to read posts.

We will finish this challenge in Part 2 of this post so stay tuned!!!

Bibliography & Resources

• https://www.invisionapp.com/inside-design/mobile-first-design/
• https://medium.com/@zena.jun/coding-mobile-first-f1e448317841
• https://zellwk.com/blog/how-to-write-mobile-first-css/
• https://lifehacker.com/top-10-ways-to-teach-yourself-to-code-1684250889
• https://www.frontendmentor.io
• https://css-tricks.com/css-grid-replace-flexbox
• https://www.digitalocean.com/community/tutorials/angular-building-custom-directives-angular
• fontawesome.com
• https://sass-lang.com/styleguide/code