Component thinking in Angular

Fylo data storage component, challenge. Part 1

Introduction

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
Two main components in our mobile web app
First component

Component 1 — Header / Navbar

Containers

Two main parts inside this component

Items

Items in the first component
$ npm install --save @fortawesome/fontawesome-free
"styles": [
"src/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.css"
],
<i class="fas fa-file"></i>
https://fontawesome.com/icons/dragon
Note 📝 : look up how you can do icons bigger
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
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
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
Border Radius allow us to paint these kind of borders just with one line of code. header.component.scss
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
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

✍ Conclusion ✍

👣 Next Steps 👣

Bibliography & Resources

--

--

Get the Medium app

Karim

Among other things | 🚀 Software Engineer 👨‍💻 passionated ❣ about Angular, Node, RxJS, DataViz & Web3 🚀 |