Angular2-5でビューの描画がすべて終わってから処理をしたい

Question

Angular2-5でビューの描画がすべて終わってから処理をしたい場合どうしたらよいでしょうか？

たとえば、

サーバから取得してきたデータの配列を元に*ngForで<div></div>要素を作成し、
その<div>要素×nに対して slick.js などでカルーセルを作りたいとします。

その場合、
やりたいことは、「ビューの描画がすべて終わってから、カルーセル作成処理を実行」なのですが
この処理は Angular のどこに書けばよろしいでしょうか？

ngInit や ngAfterViewInit などに書いても動かなかったのですが、
ngAfterViewChecked に書いてなんとか動きました。

ただ、ngAfterViewChedcked はマウスを動かすだけで実行されてしまうので、
絶対に違うだろうなと思っており、質問させていただきました。

素人の質問で大変恐縮ですが、よろしくお願いいたします。

Comments

[xenbeat]

ソースコードがないと具体的な回答ができないので、自分が書いたソースコードとその中のどこでつまづいたか明記ください。

[xenbeat]

Angularはhttps://stackblitz.com/を使えば簡単にソースコードの共有が可能です。Angularの場合ソースコード全体をTeratailに載せようと大変というかおさまらないので。

Answer 1

サーバーから取ってきたデータがどういうルートでComponentに渡ってくるかにもよりますが、

■ @Input()経由の場合
ngOnChangesで変更検知可能

■ DIしているServiceのObservableからの場合
observable.subscribe()のコールバックでComponentのプロパティに値を入れたあとに実行。

https://stackblitz.com/edit/angular-1aqpa2?embed=1&file=src/app/app.component.ts

こんな感じでしょうか？
コートがないと説明も曖昧になってしまうのでどこかに上げてもらえるともっといい回答が得られるかもしれません。

Answer 2

lastで最終確認ができるみたいです。

https://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished

<li *ngFor="let item in Items; let last = last">
  ...
  <span *ngIf="last">{{ngForCallback()}}</span>
</li>