Css-Doodle svg update with angular

Question

Context : I am in typical and classic Angular project and trying to import the css doodle library.

I am currently looking to use the css-doodle library in an angular project. There is not much documentation mixing the Angular framework with the CSS-Doodle library. Fortunately, it is possible and can be done as I found in this example: https://stackblitz.com/edit/angular-rvf8rg?file=src%2Fapp%2Fapp.component.html

However, there are a lot of others examples that use CSS-Doodle WITHOUT Angular. My problem is that I would like to use this next effect that I found but that is not IN Angular: https://codepen.io/yune/pen/ZEGbypB.

In the JS there is the use of the Id doodle but in my Angular project I can't get the update() function even though I tried to use a #doodle selector that I added on the element like that :

<css-doodle #doodle use="var(--rule)" id="doodle" click-to-update></css-doodle>

and in my ts I try something like that :

export class AppComponent implements OnInit {
  title = 'sandbox';
  @ViewChild('doodle') doodle: any;

  ngOnInit(): void {
    setInterval(() => {this.doodle.update()}, 4000)
  }
}

But I get an error like this.doodle.update is not a function. Does anyone have a clue to help me or has anyone already used update from CSS-Doodle in Angular or uses a derivative way to do it?

score 0 · Answer 1 · edited Mar 28 '23 at 14:44

I resolve this by using ngAfterViewInit instead of ngOnInit because the ViewChild queries are set before the ngAfterViewInit callback is called.

My solution is :

export class AppComponent implements AfterViewInit  {
  title = 'sandbox';
  @ViewChild('doodle') doodle: ElementRef | undefined;

  ngAfterViewInit(): void {
    setInterval(() => {this.doodle?.nativeElement.update()}, 4000)
  }
}```

Css-Doodle svg update with angular

1 Answers1