Archive: our articles

Category: Angular

Angular

Creating Expressive Toast Components With Angular Animations

In some of my recent projects, I have experienced the need and requirements for better user experience by incorporating animations into Angular-based user interfaces. In this article, I am showing you how you can create an expressive toast component with Angular animations yourself.

During the development of user interfaces, it is essential to pay attention to the visualization of transitions. Without transitions, the state change of an element will happen instantly. We can achieve a better user experience with transitions if we are slowing down the changes. I am using Angular’s domain-specific language (DSL) for animations to solve this issue.

view content >
Angular

The Motivation For Using Web Components, An Introduction: Perks & Flaws Series – Part 1

Web Components – a term you most probably hear regularly in recent times as a web developer. With the standards of Shadow DOM, HTML Custom Elements, HTML Templates, and, in former times, HTML Imports, there finally is a native component model within the browser. In this four-part article series, we are exploring the perks and flaws of Web Components within a demo application. This demo will show how frameworks like Angular, React, Vue, LitElement, and Stencil.js can seamlessly work together in one application as Web Components.

view content >
Angular

Re-Using Angular components in a Blazor WebAssembly application using Angular Elements – Web Components custom elements, FTW!

Microsoft’s Blazor WebAssembly toolkit is one of the new kids on the block in WebAssembly land. For many developers WebAssembly (or WASM) is the origin for a new revolution in the web. We can finally(?) use other languages and frameworks than JavaScript to run applications in a standards-based way in a cross-platform fashion on all browsers, on any devices (please refer to the current support of WebAssembly in your browser).

view content >
Angular

RxJS in Angular – Single Result Data Streams and Async Pipe

In the first and second part of this small series, we have discussed implementations that have flaws and can introduce side-effects to our data flow. We have learned how combining our streams and modeling our our data flow to yield a single result helped with solving the introduced problems.

view content >
Angular

RxJS in Angular – Antipattern 2 – Stateful Streams

This is the second part of a small series, in which I want to share some pitfalls we discovered multiple times in code reviews over the years, as well a few patterns we identified as helpful. In the first part we discussed how nesting subscriptions can be harmful.

view content >
Angular

RxJS in Angular – Antipattern 1 – Nested subscriptions

Working on numerous Angular projects over the past couple of years, it has become evident, that a lot of developers still have a hard time working with RxJS which finds its use in Angular. While RxJS is a very powerful tool, it comes with a lot of operators and a whole paradigm shift. Even experienced developers can be hung up on its intricacies and more than 100 operators.

view content >