Ionic3 Cannot read properties of null (reading 'setAttribute')

Ionic Framework ionic-v3
1

In my ionic3 program, there is an error Unhandled Promise rejection: Cannot read properties of null (reading 'setAttribute') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of null (reading 'setAttribute')

Source code is:

.ts

... 
d = [
    "M", start.x, start.y,
    "A", opts.radius, opts.radius, 0, largeArcFlag, 0, end.x, end.y,
    "L", opts.cx, opts.cy,
    "Z",

    "M", start2.x, start2.y,
    "A", cutout_radius, cutout_radius, 0, largeArcFlag, 0, end2.x, end2.y,
    "L", opts.cx, opts.cy,
    "Z"
  ].join(" ");
document.getElementById('red').setAttribute("d", d);

.html

<svg viewBox="0 200 400 400" width="400" height="400">
  <path id="red" fill="red" stroke="none" fill-rule="evenodd" />
</svg>

.scss

svg {
  background: #ddd;
  display:block;
  margin-top: 2rem;
}
2

The error says it - red does not yet exists when you like to reference it

Red is either conditionnally rendered or you do the setAttribute too early (in constructor or ngOninit etc)

Third the angular way is to use ViewChild - bit one can get away with this

3

Thank you very much. Can you please tell how use ViewChild for this code?

4

Google is your best friend