How to track if view is rendered for new input in Angular

how check Angular?

first execute the whole function, then check.

This is the reason not work your foo() function

Your bar function works because the setTimeout makes Angular check again NOT because "angular is late". See that you can not use the argument milliseconds. but you can use also simply:

//see that not use async or Promise or ...
bar() {
  this.data.set({
    id: "12345678"
  })
  setTimeout(()=>{
    let docEl = document.getElementById("12345678"); // now finds it
     console.log(docEL)
  })
}

See that, even you use "effect" you need "again redraw"

constructor() {
    effect(() => {
      const data = this.data();
      setTimeout(() => {
        let docEl = document.getElementById('node_' + this.data().id); // now finds
        console.log(this.data().id, docEl);
      });
    });
  }

You can use also inject ChangeDetectorRef

 cdRef=inject(ChangeDetectorRef)
 bar() {
    this.data.set({
      id: this.data().id + 1,
    });
    this.cdRef.detectChanges(); //

@Component({
  selector: 'app-root',
  template: `
    
node{{data().id}}

    foo
    bar
  `,
})
export class App {
  data = signal({ id: 12345678 });
  constructor() {
    afterRenderEffect(() => {
      let docEl = document.getElementById('node' + this.data().id);
      console.log(docEl);
    });
  }
  foo() {
    this.data.set({
      id: this.data().id + 1,
    });
  }
  async bar() {
    this.data.set({
      id: this.data().id + 1,
    });
  }
}

Stackblitz Demo