Fanis Prodromou
  • Blog
  • About
  • Blog
  • About
Search by typing & pressing enter

YOUR CART

1/28/2021 Comments

Angular Reactive Forms in parent-child components

Picture
image from unsplash
Since you are here, I assume that you love Reactive Forms (the same do I), but you caught yourself wondering if you can split a big component into smaller ones. The short answer is yes!
In this article, I will explain a relatively easy way to do this.

Read More
Comments

12/26/2020 Comments

2020 Achievements

Picture
source: unsplash.com
2020 is a year that we'll all remember. The COVID-19 pandemic has changed the way we work, shop, communicate, hang out with friends. Many families faced the tragedy this virus has brought :( 

Of course, the pandemic affected me as well (+-) both in my personal and professional life. I am a Front End developer with a passion for Angular framework, willing to help and evolve. Professionally I feel that it was a good year. 

Below are my achievements and contributions to the Angular community.​

TL;DR
  • Book: 1 (WIP)
  • Trainings: 4
  • Meetup talks: 5
  • Online videos: 4
  • Courses: 1
  • Articles: 4
  • Workshops: 1
  • OSS Contribution:
    • Angular: 2
    • Storybook: 4
  • StackOverflow answers: 10

Read More
Comments

12/24/2020 Comments

Angular Reactive Forms: Display error messages onSubmit

Picture
source: unsplash.com
The form validations play a significant role in web applications that have heavy forms. With validations, we achieve two things:
  • Establish communication with the end-user
  • Data integrity on the server. 
We know that complex business cases require different handling. Some application forms need to update the form model on the submit event, and some others require to display the error messages when the submit button is clicked.
​In this article, we will see both.

Read More
Comments

10/28/2020 Comments

State Management and the washing machine

Washing Machine Picture
image from unsplash
I will start this article by saying that  State Management is not easy.

You might think "c'mon, state management is just a bucket that holds data. Not a biggie". And yes, I....agree(?) It's a bucket that we have to split in slices, to think what data to add and in which slice, how and when to get data from the slice, how to deal with the side effects, how to construct the actions and the functions that handles those actions, aka reducers. Well, it seems that it's not that easy after all.

Read More
Comments

10/9/2020 Comments

lazy load Angular components in a HOC

Picture
image from unsplash
A great feature that Angular has is to dynamically load component in a Higher Order Component by using the ComponentFactoryResolver. Apart from this, we can also lazy load a component using ES6 import. 


Read More
Comments

7/6/2020 Comments

Mind your imports and save the bundle size

Picture
Did you know that a wrong SCSS usage can increase the bundle size of your Angular application? And you know what this issue is, right? A performance issue!! The bigger the bundle size the more time the browser requires to download all the files and the more time it takes to paint the page. 

A side note here: The CSS is render blocking which means that the browser won't render anything until all the CSS is downloaded and the CSSOM is constructed. 

Having this in mind, we have to take extra care of our CSS. Don't we? :) 

Read More
Comments

12/16/2019 Comments

Angular - Custom Form Elements

Picture
Photo by Eugen Str on Unsplash
The majority of the products I worked on was/is B2B and they consisted of many (MANY) web forms. You know how this goes.
  • You have to create the form model in the component (especially if you use reactive forms)
  • Create the HTML elements
  • Create the HTML elements
  • ...
  • Create the HTML elements
Those HTML elements more or less have a wrapper <div> element, a <label> tag, an <input> field, elements for error messages. This goes on and on. 

Who is our best friend for situations like this? ctrl+c & ctrl+v :) Yeah I know. I've been there.

Someone might say that this "best friend" helps us in many different cases. Here a bell rings. What do you do when you have to re-use the same code again and again? The answer is Abstraction. 
​

You know how to abstract your code in JS, in TS in C# and in many other languages. What about HTML though? Continue reading to find this out :) 

Read More
Comments

5/13/2019 Comments

Ionic - use Angular CLI environments on build

Picture
Developing an application in Angular CLI is really fun and fast due to its nature and the features it offers to developers.  One of the great features it has, is the ability to run your code using different variables. Similar to environmental variables that are distinguish per se. But what are the environment variables and what is the relation with the ionic?

Read More
Comments

3/31/2019 Comments

GraphQL from REST perspective

Picture
A majority of web sites are SPAs, built either with Angular, Vue, React or any other framework. My personal preference is Angular but this is not the case of this topic :) 
Apart from the web sites, a lot of mobile applications are hybrid built with frameworks such as Ionic. 

All of them require a back-end system that handles the database calls, the heavy data processing/manipulation etc. How does the Client app (SPA or hybrid) communicates with the Server App (back-end)? I bet that the first thing that arises in your mind is the REST. And yup! You are right. This is not the only solution though. There are other solutions that you should consider. 
From the title of this post, you can imagine what the solution I am talking about is :). GraphQL. 

Let's see what this is and how we can use it. 

Read More
Comments

12/26/2018 Comments

Component communication with exportAs property


Have you ever had the need two components to communicate each other? Of course you had!

I bet that when you hear components communication or components interaction, you automatically think of @input @output decorators. 

Say that we have two components, parent and child. You want the parent component to interpolate on its template a property from the child component. How can we do this?
​
  1. Make use of @output decorator.
    When the child emits an event, the parent will handle this, take the event arguments, assign the value on a another variable, and finally use that variable on the template interpolation. You don't say that is a short way :)

  2. Make use of @viewChild

  3. Make use of exportAs

Read More
Comments
<<Previous

    Author

    I am a senior software engineer who loves scuba diving and hiking. A dog type person who owns two cats

    View my profile on LinkedIn

    Tags

    All Angular Angularjs General Graphql Ionic Javascript .net Nodejs Typescript

Proudly powered by Weebly