javascript - Angular Material (タブ) レンダリングのコールバックはありますか?

Question

Angular Material タブにマップを統合しようとしています。正確には、すべてのタブのマップです。マップのレンダリングにDatamapsを使用しています。

私が取り組んだデモでペンを作りましたhttp://codepen.io/sgsvenkatesh/pen/yJbYOj

でマップの初期化をラップすると、コードは期待どおりに機能しsetTimeoutます。（上記のペンの128行目でコメントアウトしました）

以下に示すように適用すると、コードは完全に正常に機能しsetTimeoutます。

setTimeout(function () {
    new Datamap({
        element: elem[0].querySelector(".map"),
        scope: 'usa',
        projection: 'equirectangular',
        height: 500,
        fills: {
            defaultFill: '#F5F5F5'
        },
        data: scope.dataset,
        geographyConfig: {
            highlightBorderColor: '#bada55',
            popupTemplate: function (geography) {
                return '<div class="hoverinfo">' + geography.properties.name + '</div>';
            },
            highlightBorderWidth: 2
        }
    }).labels({'customLabelText': scope.USData});
}, 1000);

私の意見では、この問題は、Angular マテリアルのレンダリングが完了する前にデータマップがレンダリングされることが原因です。(おそらく、それが svg に幅/高さがない理由です)

レンダリングが完了した後、Angular Material はコールバックを提供しますか? そうでない場合、マテリアルのレンダリング後に発生するはずの DOM 操作をどのように実現しますか。

さらに情報が必要な場合はコメントしてください。