Wrapping html tag bound UI Components in Angular

I'm creating a "wrapper" library around Angular Material UI for my application, as described in this article: Should you wrap your UI components article

Pretty much the idea is to have a little abstraction level which would make it easier to write standard UI functionality, hide details of underlying implementation from UI developers and make it possible to easily refactor large chunks of application UX without going through much code.

One thing I'm stuck with is trying to wrap components which don't have its own dedicated tag but bind to existing HTML tag, for example MatButton component which binds to <button mat-button>

I want to create a corresponding component <button my-button> which should behave exactly as <button mat-button mat-primary mat-raised-button>. This was quite trivial in Angular 1, but for new Angular I'm completely lost... Please help!

Here is a code example: Stack Blitz Button Example

from Wrapping html tag bound UI Components in Angular