Image for post
Image for post

When I first heard about compliant mechanisms I was very impressed. Even though they surround us in our daily lives — we barely ever think about what they are conceptually.

These are things like backpack latches, mouse buttons, shampoo caps. In short, a compliant mechanism uses deformation to achieve its technical characteristics. In traditional engineering, flexibility is usually a disadvantage of the material. Compliant mechanisms on the contrary use it to transfer force and movement, instead of passing it through multiple moving parts as rigid body mechanisms do.


Image for post
Image for post

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

When you’re building a reusable components library, API is very important. On one hand, you want a tidy, reliable solution, on the other — you need to take care of lots of specific use cases. And it’s not just about working with diverse data. Your components must be flexible visually. Besides, it has to be easy to update and deliver across projects.

These components must be customizable like no other. And it shouldn’t be hard to do…


Just before new year, Roman, my colleague, announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.

Image for post
Image for post

What is a portal?

Imagine you have a select component. It has a drop-down block with suggestions. If we keep it at the same position in DOM as the hosting component, we will run into all sorts of trouble. Items pop through and containers can chop off content:


Web MIDI API is an interesting beast. Even though it has been around for a while now, it is still only supported by Chrome. But that’s not gonna stop us from creating a playable synthesizer in Angular. It is time we bring Web Audio API to the next level!

Image for post
Image for post

Previously, we spoke about declarative use of Web Audio API in Angular. Programming music is fun and all but how about actually playing it? There is a standard called MIDI. It’s a messaging protocol for electronic instruments data exchange developed back in the 80s. And Chrome supports it natively. It means…


Image for post
Image for post

Web Audio API has been around for a while now and there are lots of great articles about it. So I will not go into details regarding the API. What I will tell you is Web Audio can be Angular’s best friend if you introduce it well. So let’s do this.

Basics

In Web Audio API you create a graph of audio nodes that process the sound passing through them. They can change volume, introduce delay or distort the signal. Browsers have special AudioNodes with various parameters to handle this. Initially, one would create them with factory functions of AudioContext:


Have you wondered how Angular forms work with HTML elements where user enters data?

From the beginning, it was a responsibility of ControlValueAccessor. Angular has several accessors out of the box: for checkboxes, inputs, selects. Let’s say you develop a chat application. You need to be able to change style of the text. Make it bold or underlined, add emojis and so on. You would most likely use contenteditable attribute to handle formatting.

Angular does not have an accessor for contenteditable, so if you want to use it with forms you will have to write one.

Image for post
Image for post

ControlValueAccessor

Directive that we will…


This summer me and Roman started a series of tweets with helpful tips and tricks about Angular. It was met well by the community so I decided to write an article follow-up. Here are 5 generalized advises I want to give to Angular developers across the globe. These advises are backed by some concrete examples pulled from our Twitter activity. They can help you improve your developer skills or give you some practical tricks at the very least.

Image for post
Image for post

1. Know how change detection works in Angular

There are many great articles going deep into change detection mechanism. Like this one. …


When you need to be able to color your SVGs with CSS, what do you do? You don’t have much options here. Typically, you would either use an icon font or you can request icons manually and inline them in HTML. Icon font has to be optimized, otherwise users would load all icons upfront. Inlining causes many heavy DOM operations if you have a lot of icons on a page. It is detrimental to performance and could be dangerous.

To safely inline SVGs you need to sanitize them. Built-in Angular sanitizer, for example, does not support SVGs. It clears them…


Now that Edge joined Chromium browsers happy family only Firefox lacks CSS scrollbars. These are great news but besides Firefox there are a lot of limitations in CSS solution. Just look at what kind of black magic we have to resort to for a simple fade effect. For complete control we still have to rely on JavaScript. Let’s see how we can do it properly with Angular component.

Scrollbar in action
Scrollbar in action

CSS magic

Of course, how would we do without it? First, we need to hide native scrollbars. We can do this in every browser these days.

There is a standard rule scrollbar-width, which only…

Alexander Inkin

Devoted Angular developer, musician and open-source author ___________________ 🌲 taiga-ui.dev ······ 🎹 jamigo.app ······

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store