There is a recent change introduced in Angular 13 where the old way of calling javascript functions from angular components isn't working anymore.

I am facing an issue with calling a javascript function from a specific component.

I already tried the usual way and here is my approach.

FILE: src\assets\js\main.js

(function($) {
"use strict";
function animatedProgressBar () {
    $(".progress").each(function() {
        var skillValue = $(this).find(".skill-lavel").attr("data-skill-value");
        $(this).find(".bar").animate({
            width: skillValue
        }, 1500, "easeInOutExpo");
        $(this).find(".skill-lavel").text(skillValue);
    });
}
})(jQuery);

FILE: src\app\about-me\about-me.component.ts

import { Component, OnInit } from '@angular/core';
declare function animatedProgressBar(): any;
@Component({
    selector: 'app-about-me',
    templateUrl: './about-me.component.html',
    styleUrls: ['./about-me.component.css']
})

export class AboutMeComponent implements OnInit {
    //declare animatedProgressBar: any;
    constructor() {}
    ngOnInit(): void {
        animatedProgressBar();
    }
}

This code snippet throws an error: ERROR ReferenceError: animatedProgressBar is not defined

I checked the answer on This StackOverflow topic but it didn't work for me.

Looking forward to some valuable inputs on this issue.