css doodle throwing errors with angular?

https://codepen.io/tuckermassad/pen/rPYNLq

I copied the CSS doodle code from there into my angular component:

<section class="main">
    <css-doodle grid="5">
        :doodle {
          @grid: 10 / 100%; 
        }
        background: @pick(
          #ff0198, #8156a8, #ff6d00, #ff75e4
        );

        transform: translate(
          @rand(-50vw, 50vw),
          @rand(-50vh, 50vh)
        );

        @size: 3.5vmin;
        @shape: heart;
        @place-cell: 50% 50%;

        animation-name: explosion;
        animation-iteration-count: infinite;
        animation-direction: reverse;
        animation-duration: calc(@rand(2s, 5s, .1));
        animation-delay: calc(@rand(-5s, -1s, .1));
        animation-timing-function: 
          cubic-bezier(.84, .02, 1, 1);

        @keyframes explosion {
          0% { opacity: 0; }
          70% { opacity: 1; }
          100% { transform: translate(0, 0); }
        }
      </css-doodle>
</section>

Now, I Installed css-doodle with npm i css-doodle, and I ran the project and I get the following error:

compiler.js:2547 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{") to escape it.) ("
        }
      </css-doodle>
</section>[ERROR ->]"): ng:///AppModule/HomeComponent.html@32:10
Invalid ICU message. Missing '}'. ("
        }
        background: @pick(
          #ff0198, #8156a8, [ERROR ->]#ff6d00, #ff75e4
        );

"): ng:///AppModule/HomeComponent.html@6:28
Invalid ICU message. Missing '}'. ("
        }
      </css-doodle>
</section>[ERROR ->]"): ng:///AppModule/HomeComponent.html@32:10

Is there a way to work with css doodle in angular?

from css doodle throwing errors with angular?