Posts tagged with

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

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

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

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

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

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: 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 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

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

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

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

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

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 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

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

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

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

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

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

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 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

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

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

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

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

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

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

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 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

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

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 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

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

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

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

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

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

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

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

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

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