How to modify third-party element in Angular

Often we have to use libraries that make development easier. For example Angular Material. But currently it does not support extending/overriding of modules. Say you want to insert some html inside tabs component, between header and body.

I would like to share my way of solving the issue. If you have any other ideas on that please feel free to comment.

So the idea is: to add attibute directive and with this directive get access to rendered html of mat tab group

<mat-tab-group [appInvitingGuests]="1">

import {
  AfterContentInit,
  Directive,
  ElementRef,
  Input,
  Renderer2
} from '@angular/core';

@Directive({
  selector: '[appInvitingGuests]'
})
export class InvitingGuestsDirective implements AfterContentInit {

  constructor(
    private _el: ElementRef,
    private _renderer2: Renderer2) {
  }
    public param: number;

  @Input() set appInvitingGuests(param: number) {
    this.param = param;
  }

  ngAfterContentInit() {
   //out custom div element to be inserted into the angualar material mat tabs element
    const div = this._renderer2.createElement('div');
    const matTabBodyWrapper = this._el.nativeElement.parentNode.querySelector('.mat-tab-body-wrapper');
    const paramText = this._renderer2.createText(this.param);

    this._renderer2.appendChild(div, paramText);

    this._renderer2.insertBefore(matTabBodyWrapper.parentNode, div, matTabBodyWrapper);
  }
}