The Mixin concept is being used for years on OOP languages like JAVA and C#, the popular css preprocessor Sass and the vue.js framework also embraced the pattern by letting the developers an explicit API, so what is mixin? I want to see some examples!

According to the Wikipedia definition:

Mixin programming is a style of software development, in which units of functionality are created in a class and then mixed in with other classes.

In other words: Mixin lets us have a kind of behavioral composition.

I came to really wonder of a mixin implementation when I needed a reference to a nav-menu component.

Material2 is usually my first reference when I design infra components, I was looking at the: MatTabNav class code and noticed the _MatTabNavMixinBase class so I kept digging into the code while exploring the topic.

Let’s keep reading the Wikipedia definition:

A mixin class acts as the parent class, containing the desired functionality. A subclass can then inherit or simply reuse this functionality, but not as a means of specialization. Typically, the mixin will export the desired functionality to a child class, without creating a rigid, single “is a” relationship.

I can’t truly fully understand a concept until I jump into coding so following is my implementation of mixin, heavily inspired by angular material: