call javascript void in angular

Question

I am using an html template for a website in Angular This template uses JavaScript to perform page elements. My problem is that when I use ngfor to create an element, the page layout crashes due to a lack of readability of the JavaScript functions.

i declar AppConfig in component.ts but I encounter the following error AppConfig is not a function

import { environment } from 'src/environments/environment';
import { GetAllSongsModel } from '../models/song-models/get-all-songs-model';
import { GetAllSongsService } from '../services/songService/get-all-songs.service';
declare var $: any;
declare var AppConfig: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private getAllsongs: GetAllSongsService, private http: HttpClient) { }

  apiURL = environment.ApiUrl
  allSongs?: GetAllSongsModel
  private getAllSongsPath = this.apiURL + 'ApiSongs/Allsongs'
  ngOnInit(): void {
    this.GetAllSongs();
    //Error
    AppConfig('init');
    //Error
    AppConfig();
    //Error
    AppConfig();
    //Error
    AppConfig.init()
  }

  GetAllSongs() {
    this.http.get<GetAllSongsModel>(this.getAllSongsPath).subscribe(res => {
      this.allSongs = res
    })
  }
}

My JavaScript file is as follows. How can I call this init or reInitFunction after adding elements to the component?

"use strict";

//=> Class Definition
var AppConfig = AppConfig || {};
$(function () {
    AppConfig = {
        //=> Initialize function to call all functions of the class
        init: function () {
            console.log("init scripts");
            AppConfig.appRouting();
            AppConfig.initAppScrollbars();
            AppConfig.langCheckedToApply();
            AppConfig.search();
            AppConfig.buttonClickEvents();
            AppConfig.initTheme();
            AppConfig.reInitFunction();
        },

        //=> Reinitialize powerful functions of app
        reInitFunction: function () {
            AppConfig.initSlickCarousel();
            AppConfig.materialTab();
            AppConfig.addFavorite();
        },

        //=> Handle app routing when page url change
        appRouting: function () {
            var $document = $(document);
            $document.on('click', 'a:not(.load-page):not(.external)', function (e) {
                e.preventDefault();

                var _this = $(this);
                var url = _this.attr('href') !== 'undefined' ? _this.attr('href') : null;
                if (url && AppConfig.filterLink(url)) {
                    AppConfig.ajaxLoading(url);
                    console.log(url + " ===>")
                }
            });
        },
        ......
    };

    var $body = $('body'),
        $headerBackdrop = $('.header-backdrop'),
        $sidebarBackdrop = $('.sidebar-backdrop');

    //=> Call class at document ready
    $(document).ready(AppConfig.init);
});

        <div class="carousel-item-6 arrow-pos-2">
            <div class="custom-card" *ngFor="let song of allSongs?.songList">
                <div class="custom-card--img">
                    <a href="{{apiURL}}{{song.songId}}">
                        <img src="{{apiURL}}{{song.song150px}}" alt="{{song.songName}}" class="card-img--radius-lg">
                    </a>
                </div>

                <a href="{{apiURL}}{{song.songId}}" class="custom-card--link mt-2">
                    <h6 class="mb-0">{{song.songName}}</h6>
                </a>
            </div>
        </div>