How to detect when Angular has attached elements to the DOM?

Question

There is a component:

it\'s component receives a stream of numbers as @Input

Answer 1

You can create a directive to detect the elemntmrender to the dom and run a method at that time

import { Directive , Output ,EventEmitter } from '@angular/core';

@Directive({
  selector: '[rendered]'
})
export class RenderedDirective {

   @Output() rendered:EventEmitter = new EventEmitter();

   ngAfterViewInit() {
     this.rendered.emit()
   }

}

ngAfterViewInit will called after Angular has fully initialized a and render li elemnt

MyComponent

export class MyComponentComponent {

  numbers: number[] = [];

  @Input() set data(numbers: number[]) {
    this.numbers = numbers;
  }

  myCallback(elm) {
    console.log(elm)
  }

}

template

    

        {{n}}
    

stackblitz demo