Lukas Marx (Author) | malcoded.com

Lukas Marx

(he/him)

I am a computer science (masters) student living in Germany. I've started writing this blog in 2016, to document my coding-journey for myself and others. Entering the world of frontend-development with vanilla JavaScript, I quickly fell in love with single-page-applciation-frameworks, like Angular. Since back then, I am continously exploring the depths of angular, sharing my most exiting findings here with you!

Posts by Lukas Marx

Angular Authentication: JSON Web Token

When I started with web development, I had a lot of trouble when I tried implementing a simple authentication system. There are all these terms like signatures, sessions, hashes, encryption and whatnot that make it quite hard to get started. Not to mention that doing this for a real projec...

L Lukas Marx
February 23, 2020
10 min read

angular
Angular Top 25: What you should have read in 2019

The year 2019 is almost over... As every year (for the last 3 years now... wow) I collected the atricles and blog posts about Angular I enjoyed the most. Thank you to the whole Angular community for creating the great content! I would also like to thank the loyal readers of this blog. Som...

L Lukas Marx
December 15, 2019
3 min read

angular
React Portals: Creating a Dialog

In this tutorial, you are going to learn what react portals are and how to use them to spawn components anywhere on the DOM. We will take a look at the example of a simple dialog component to grasp the concepts of portals and why they are useful. You can take a look at what we will build in the d...

L Lukas Marx
September 22, 2019
4 min read

react
React DOM Refs

In this tutorial, you will learn how to get access to the actual DOM in React using so-called refs. To do that, we will take a look at what refs are and when and how to use them. You will also learn about callback refs and what they are used for. During this tutorial, we will take a look at di...

L Lukas Marx
August 28, 2019
6 min read

react
How to use styles in React: Inline styles, CSS Modules & Styled Components

In this tutorial, you will learn how to style your components in react. We will take a look at how you can use inline styles, regular CSS classes, CSS modules or react styled components. Also, you will discover how to conditionally apply styles based on the state of the component. Ready? ...

L Lukas Marx
June 4, 2019
6 min read

react
How to send HTTP Requests in React

Sending an HTTP request to a server is a common task in web development. In this tutorial, you will learn how to send HTTP requests from your react application using different APIs like XMLHttpRequest, fetch and axios. You will learn how to send GET and POST requests with different configura...

L Lukas Marx
May 30, 2019
7 min read

react
Internationalization (i18n) with Angular

In this tutorial, you will learn how to use the angular i18n functionality to translate your angular app into different languages. Also, we will take a look at how you can use the angular-cli to generate translation files automatically and how we can customize them. Finally, we discover ...

L Lukas Marx
May 25, 2019
9 min read

angular
Async Pipe: How to use it properly in Angular

In this tutorial, we are going to take a look at how we can use the angular async pipe and why you should always use it in combination with observables. Also, we will learn how to use it with interpolation data binding and different directives like \*ngIf and \*ngFor. Ready? Let’s get sta...

L Lukas Marx
May 24, 2019
6 min read

angular
NgStyle: How to assign CSS styles in Angular

In this tutorial, we are going to take a look at how we can dynamically assign CSS styles to elements using angular. We will take a look at different methods to dynamically assign a CSS style to an element using the style property. You will also learn, how we can toggle that styles on or off...

L Lukas Marx
May 23, 2019
4 min read

angular
Angular Custom Directives

In this tutorial, you will learn what angular attribute directives are and how to create custom directive. We will discover how to use directives to alter the appearance of DOM-element, react to user input and how to pass input to directives. In the process it will also become apparent when ...

L Lukas Marx
May 11, 2019
6 min read

angular
Angular Two-Way Data Binding

In this tutorial you will learn what data-binding is, the difference between one-way and two-way data binding and how to implement both in angular. We will take a look at all the different ways of using data binding in angular and learn how the angular template syntax works. Also, we will no...

L Lukas Marx
May 7, 2019
7 min read

angular
Building a Swipeable List with React

In this tutorial, you will learn how to create a react list component where each element can be swiped to trigger an action. A typical example of this is "swipe to delete" used in many android applications. We will discover, how we can build such a list using nothing but react itself. Also, you ...

L Lukas Marx
March 1, 2019
10 min read

react
Creating a File Upload Component with React

Creating a file upload component is a common task in web development. Unfortunately it can be quite intimidating. In this tutorial you will learn how to create a working file upload component with react from scratch using no dependencies other than react itself. You will learn how to upload file...

L Lukas Marx
February 13, 2019
17 min read

react
Creating a File Dropzone with React

In this tutorial you are going to learn how create a file dropzone component from scratch using react. We will discover how to open a file selection dialog in react using some nifty tricks. Furthermore, we will learn how to listen for file drop events and use that to build a reusable dropzone com...

L Lukas Marx
February 6, 2019
8 min read

react
Angular Top 50: What you should have read in 2018

The year 2018 is coming to an end... That time went by quite quickly, didn't it? It was a very exciting year to be an angular developer. There was not only one, but there were two major framework (6 & 7) releases! But not only the guys from the angular team were busy. The community did a great j...

L Lukas Marx
December 20, 2018
6 min read

angular
Vue.js Computed Properties

In this tutorial, you will learn what Vue computed properties are and how to use them. We will compare them to regular Vue methods and discover when to use computed properties instead. Ready? Let's get started! ![vuejs-question](./img/vuejs-question.png) ## Why using Vue methods is not alway...

L Lukas Marx
November 28, 2018
5 min read

vue
Creating Angular Desktop Apps with Electron

In this tutorial, we are going to take a look at how to turn any angular application into a native desktop app using electron. You will learn how to set up an angular app and run it inside of electron using typescript all the way. Also, you will discover how to use native APIs like the file syste...

L Lukas Marx
November 17, 2018
12 min read

angular
Creating a Color Picker Component with Angular

In this tutorial, you will learn how to create a color picker with angular from scratch. We will take a look at how to use the HTML-canvas together with angular to create the rainbow-like effect we are all used to. Also, we will discover how to create a basic drag&drop functionality using the can...

L Lukas Marx
September 18, 2018
14 min read

angular
Angular Dynamic Components: Building a Dialog System

In this tutorial, you will learn what dynamic components are and how they work in angular. You will do so by creating a very flexible dialog system, that demonstrates how dynamic components are used. We will learn how to create dynamic components and attach them to the DOM or use them in other co...

L Lukas Marx
September 12, 2018
19 min read

angular
Validating Reactive Forms in Angular

Forms are a fundamental part of every angular application. One of the greatest features of forms is, that you can validate the input of the user before it is send to the server. In this tutorial you are going to learn how you can validate your angular reactive forms. We are going to create a bas...

L Lukas Marx
September 9, 2018
9 min read

angular
Angular Progress Bars

In this tutorial, you will learn how to create loading indicators with angular. First, we will take at look at how to create a simple horizontal progress bar using just a DIV-element and some CSS. Afterward, we will dive into more advanced techniques using SVGs. We will use them to re-create ou...

L Lukas Marx
August 16, 2018
9 min read

angular
File Upload Component with Vue.js, Express and TypeScript

Creating file-upload components can be quite hard. Not only because you need to deal with files in JavaScript. Also, because you need an API to test against before you can actually start coding. In this tutorial, we will learn how to do both. First, we will create a simple express server with ...

L Lukas Marx
August 8, 2018
23 min read

vue
nodejs
Push Notifications with Angular & Express

In this tutorial, we are going to take a look at how to display push notifications using angular. These push notifications will be the same as the native notifications you get on your smartphone or your computer. Also the user does not have to be on your site to receive the notification because o...

L Lukas Marx
August 5, 2018
12 min read

angular
Storing Data on the Blockchain: The Developers Guide

Storing data on the blockchain is not as simple as it sounds. There are many problems that can make this task quite difficult. In this tutorial we are going to take a look at the problem from a developers point of view. No fancy business slides or buzzword bullshit! We will take a look how we coul...

L Lukas Marx
July 5, 2018
11 min read
Run Angular in a Docker Container using Multi-Stage builds

In this tutorial, we are going to take a close look at Docker and its containers. We will discover, how we can use Docker to build and host a simple angular application. For that, we will create a simple image to build angular and then use the Docker multi-stage feature to create another image to...

L Lukas Marx
June 1, 2018
9 min read

angular
NgClass: How to assign CSS classes in Angular

In this tutorial, we are going to take a look how we can use CSS classes with angular. We will take a look at different methods to dynamically assign a CSS class to an element using the className directive. We will also learn, how we can toggle that class on or off, depending on the state of the ...

L Lukas Marx
May 15, 2018
4 min read

angular
How to use *ngIf else in Angular

In this tutorial, we are going to take a look at the ngIf directive. We will discover how we can use it to show or hide parts of our angular application. Also, we will find out how the ngIf directive differs from using the "hidden" attribute. When we got the basics, we will move on to more advan...

L Lukas Marx
May 11, 2018
7 min read

angular
Angular NgFor: Everything you need to know

In this tutorial, we are going to learn about the ngFor directive. We will discover, how we can use the ngFor directive to display multiple elements directly from a JavaScript array. Also, we will take a look at the utilities of the ngFor directive, like the index, or even and odd. When we got t...

L Lukas Marx
May 9, 2018
10 min read

angular
Using Web Assembly to speed up your Angular Application

For some applications, JavaScript just isn't fast enough... But there is hope! Web Assembly is faster than JavaScript and can run in the most popular browsers today! In this tutorial, we are going to take a look at Web Assembly in angular. We will discover how we can compile any C program int...

L Lukas Marx
April 19, 2018
9 min read

angular
Angular Top 20: What you should have read in 2018 so far

Keeping up reading all the new articles that are released every day is a tough task! Therefore, I have collected the best blog-posts about angular that got released in the first quarter of 2018. Thank you everybody for writing such great articles! This list is not a competition though. There is ...

L Lukas Marx
April 3, 2018
3 min read

angular
Creating a File Explorer Component in Angular

In this tutorial, we will learn how to create a file-explorer in angular. Why? Because we can! And it's fun! ![angular-file-explorer-context](./img/angular-file-explorer-context.png) We will explore how to use the angular material library to create a visual appealing component to manage our fil...

L Lukas Marx
March 30, 2018
12 min read

angular
Creating a File Upload Component in Angular (Including Backend)

Creating file-upload components can be quite hard. Not only because you need to deal with files in JavaScript. Also, because you need an API to test against before you can actually start coding. In this tutorial, we will learn how to do both. First, we will create a simple node.js express server...

L Lukas Marx
March 19, 2018
15 min read

angular
nodejs
Resizing Images in Node.js using Express & Sharp

Resizing images on the fly as a common task for an API. Implementing the API however can be a challenge. In this tutorial, we are going to take a look at how you can implement your own image-resizing API using node.js, express and sharp. We are doing so by looking closely at each step, so you ha...

L Lukas Marx
March 18, 2018
11 min read

nodejs
5 Things that Improve your Angular Codebase Right Now!

Angular can have quite a learning curve. Building applications that are maintainable and easy to read, is a form of art by itself. In this article I will share 5 actionable tips and tricks with you, that can help you improve the quality of your code. From most basic things, like how to name your...

L Lukas Marx
March 14, 2018
14 min read

angular
Reactive Forms with Angular [Using easy Examples]

Forms are arguably one point where angular really shines. So learning how forms work in angular is an essential skill. In this tutorial we are going to take a close look at one of the two ways to create forms in angular. The reactive forms. We will dive right into code and discover all the detai...

L Lukas Marx
March 3, 2018
11 min read

angular
Angular CLI Cheat Sheet: The best Commands to boost your productivity

Setting up a new project and creating all these files for every new component can take a lot of time. It is tedious work that takes a lot of fun from the development process. Fortunately, there are tools like the angular-cli, that can do all that hard work for you! In this tutorial, we are going...

L Lukas Marx
March 2, 2018
9 min read

angular
Learn how to use GraphQL with Angular using Apollo (Step by Step)

When it comes to angular applications, there is almost always a webserver running an API, as well. If you have built such an API before, you are probably familiar with the REST-protocol. If you did, you probably also had some issues using it. Certainly, when it comes to more complex queries, REST ...

L Lukas Marx
February 21, 2018
15 min read

angular
Angular Top 50: What you should have read in 2017

The year 2017 is coming to an end... That time went by quite quickly, didn't it? It was a very exciting year to be an angular developer. There was not only one, but there were two major framework (4 & 5) releases! But not only the guys from the angular team were busy. The community did a great j...

L Lukas Marx
December 7, 2017
6 min read

angular
Building a REST-Backend for Angular with Node.js & Express

Angular is a single page application framework. Unfortunately, that does not mean that you don't require a server for certain tasks. After all, your data has to be served from somewhere... But don't worry, setting up a server is easier than you might think. In fact, the first server we will creat...

L Lukas Marx
November 16, 2017
16 min read

angular
nodejs
Angular: Everything you need to get started

You want to learn how to build Angular applications? You have come to the right place! In this getting started tutorial, I want to take you by the hand and give you a gentle introduction to the angular ecosystem. We will start from scratch and build our first example angular app. You will dis...

L Lukas Marx
November 9, 2017
43 min read

angular
Learn Redux in Angular with NgRx Store

You will probably agree with me, that angular applications can become quite hard to overlook as they become bigger. Information is passed from parent-components to child-components, @Output goes into @Input, and at the end of the day, nobody knows where the malformed result came from. But it doe...

L Lukas Marx
October 20, 2017
22 min read

angular
Why your Angular App is not Working: 11 common Mistakes

Resolving problems of your angular application can be very challenging. When your angular app is not working and all it gives you are some cryptic red lines in a console. Especially when you are a beginner, these problems can turn the development process with angular into a real pain. But trust ...

L Lukas Marx
October 4, 2017
19 min read

angular
Angular Universal and Server Side Rendering (Step By Step)

You probably agree with me when I say: Angular Universal is not easy to get right the first time. Well, it turns out, it is not that hard at all! Once you understand how it actually works, setting up a working application will be easy for you. In fact, creating a fully functional angular unive...

L Lukas Marx
September 22, 2017
23 min read

angular
Angular: Continuous Integration with Visual Studio Team Services

Continuous Integration is, once set up, very useful. Gone are the days, when we had to deploy to our servers manually. Today, all we have to do is commit to a certain branch of our (git) repository. The rest is taken care of. Of course, continuous integration is much more than automatic deploys. I...

L Lukas Marx
September 8, 2017
6 min read

angular
Angular Service Worker with Workbox

It's summertime. You are laying on the beach or at the pool, enjoying the sun on your skin. You remember an article, you discovered recently on your favorite blog. But you were too busy to read it at that time and forgot about it. You realize you have plenty of time now. So why shouldn't you rea...

L Lukas Marx
September 1, 2017
8 min read

angular
Learn how to use RxJS in Angular Effectively

RxJs is not easy. To be honest, it is sometimes pretty hard to understand. Especially in the beginning. So why should you even bother? Yes, RxJs can be complex. Very complex sometimes. But it also offers some great features that let you think in a different way. It enables you to simplify asynchr...

L Lukas Marx
August 25, 2017
11 min read

angular
Learn how to use TypeScript to build Angular Apps

You will probably agree with me, that Typescript is great. Also, that it takes some time to get used to, especially when coming from plain JavaScript. In this post, we will take a closer look at the Typescript language, to get you started as quick as possible. With the knowledge from this article,...

L Lukas Marx
August 21, 2017
13 min read

angular
Connect your Angular App with your Backend using the Http-Client

Most angular applications require data from web-servers and APIs. To talk to the outside world known as "the internet" we use the build in angular HttpClient. Today, we are going to take a look at how we can use that HttpClient and make our first requests. We will learn how to make requests, u...

L Lukas Marx
August 18, 2017
9 min read

angular
How to use Routing in Angular

Most applications have more than one page. The user clicks links, presses buttons and returns to previous pages. And although angular runs completely client side, it all behaves like the user is used to. Just like any other website. In this tutorial, we are going to take a close look at the ang...

L Lukas Marx
August 11, 2017
13 min read

angular
Lern how to split your Angular App into Modules [Includes Lazy-Loading]

Want to get a better understanding of all the different building blocks of an angular application? Don't look any further! In this article, we will take a close look at modules. Modules in angular are a great way to share and reuse code across your application. Shared modules do not only make y...

L Lukas Marx
August 5, 2017
10 min read

angular
Angular Services Tutorial

In this tutorial, you will learn what angular services are and how they are used. We will take a look at the benfits of services by using simple examples. That way you will learn about dependency injection, how to provide a serive and what singleton services are. Let's get started! ![angular-...

L Lukas Marx
July 22, 2017
6 min read

angular
Angular Fundamentals: Dependency Injection

"Dependency what ...?" That 's exactly what I thought when I first heard about Dependency Injection. It sounded like a very complex and technical thing, you better keep your hands off. Well, it is kind of complex under the hood. But fortunately, we don't have to care about the implementation. We ...

L Lukas Marx
July 15, 2017
5 min read

angular
Learn how to use Components in you Angular Application

Do you want to learn what angular components are? Don't look any further! In this article, we will take a close look at components. Components in angular are the building blocks of your application. They are crucial for designing and building your angular app. Following this tutorial, you will...

L Lukas Marx
July 8, 2017
7 min read

angular
Common mistakes with Angular Universal

Angular Universal can be quite tricky sometimes. Using the wrong statement at the wrong place can render your application useless. The good news is, these mistakes can be avoided if you know them beforehand. I have done them. You don't need to! In this tutorial, we will take a closer look, what w...

L Lukas Marx
June 22, 2017
9 min read

angular
Translate your Angular App with Pipes

Translating you app to other languages is a pretty common task. Unfortunately it can be a very frustrating and boring topic. You have to consider it in your app-architecture from the beginning, or you could end up with huge problems in a late stage of the development. In this tutorial we will lea...

L Lukas Marx
April 14, 2017
8 min read

angular
Is Angular 2+ MVVM?

I've read about that at various places now: "Angular is MVVM" or "Angular is MVC". Huh, is it? I don't think so. Actually the question can not be answered with a plain yes or no. First of all, angular 2+ is not [MVC](https://de.wikipedia.org/wiki/Model_View_Controller)! Honestly, I don't know, h...

L Lukas Marx
December 6, 2016
4 min read

angular

Lukas Marx

Posts by Lukas Marx

Angular Authentication: JSON Web Token

Angular Top 25: What you should have read in 2019

React Portals: Creating a Dialog

React DOM Refs

How to use styles in React: Inline styles, CSS Modules & Styled Components

How to send HTTP Requests in React

Internationalization (i18n) with Angular

Async Pipe: How to use it properly in Angular

NgStyle: How to assign CSS styles in Angular

Angular Custom Directives

Angular Two-Way Data Binding

Building a Swipeable List with React

Creating a File Upload Component with React

Creating a File Dropzone with React

Angular Top 50: What you should have read in 2018

Vue.js Computed Properties

Creating Angular Desktop Apps with Electron

Creating a Color Picker Component with Angular

Angular Dynamic Components: Building a Dialog System

Validating Reactive Forms in Angular

Angular Progress Bars

File Upload Component with Vue.js, Express and TypeScript

Push Notifications with Angular & Express

Storing Data on the Blockchain: The Developers Guide

Run Angular in a Docker Container using Multi-Stage builds

NgClass: How to assign CSS classes in Angular

How to use *ngIf else in Angular

Angular NgFor: Everything you need to know

Using Web Assembly to speed up your Angular Application

Angular Top 20: What you should have read in 2018 so far

Creating a File Explorer Component in Angular

Creating a File Upload Component in Angular (Including Backend)

Resizing Images in Node.js using Express & Sharp

5 Things that Improve your Angular Codebase Right Now!

Reactive Forms with Angular [Using easy Examples]

Angular CLI Cheat Sheet: The best Commands to boost your productivity

Learn how to use GraphQL with Angular using Apollo (Step by Step)

Angular Top 50: What you should have read in 2017

Building a REST-Backend for Angular with Node.js & Express

Angular: Everything you need to get started

Learn Redux in Angular with NgRx Store

Why your Angular App is not Working: 11 common Mistakes

Angular Universal and Server Side Rendering (Step By Step)

Angular: Continuous Integration with Visual Studio Team Services

Angular Service Worker with Workbox

Learn how to use RxJS in Angular Effectively

Learn how to use TypeScript to build Angular Apps

Connect your Angular App with your Backend using the Http-Client

How to use Routing in Angular

Lern how to split your Angular App into Modules [Includes Lazy-Loading]

Angular Services Tutorial

Angular Fundamentals: Dependency Injection

Learn how to use Components in you Angular Application

Common mistakes with Angular Universal

Translate your Angular App with Pipes

Is Angular 2+ MVVM?