'How to call jQuery method using CDN script in angular component

In angular index.html file I included CDN scripting and css link, datepicker method in index.html

index.html file

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>EAuction</title>
    <base href="/">
    <link rel="stylesheet" href="https://cdn/v2/styles/main.min.css">

</head>

<body>
    <app-root></app-root>

    <script src="https://cdn/v2/js/libs/jquery/jquery-3.4.1.min.min.js" type="text/javascript"></script>
    <script src="https://cdn/v2/js/libs/bootstrap/bootstrap.bundle.min.min.js" type="text/javascript"></script>
    <script src="https://cdn/v2/js/libs/calendar/moment.min.min.js" type="text/javascript"></script>
    <script src="https://cdn/v2/js/libs/calendar/bootstrap-datepicker.min.min.js" type="text/javascript"></script>
    <script>
        $(function() {
            $(".time-control").DatePicker({
                format: "hh:mm A",
                showSwitcher: false,
                showTodayButton: false,
                icons: {
                    up: 'icon-arrow-up text-primary',
                    down: 'icon-arrow-down text-primary',
                },
            });

        });
    </script>

</body>

</html>

I create Auction Component in Angular I calling date picker method in auctioncomponent.html file

<div class="auction-form">
    <div class="text-left py-3 mb-3">
        <h4>{{title}}</h4>
    </div>
    <div class="form-field">
        <form *ngIf="!showLoader" [formGroup]="basicFormGroup" class="needs-validation" [ngClass]="{'was-validated': submitted}" novalidate>
            <div class="card p-5 shadow-lg mt-4">
                <h4 class="pb-3">Start period</h4>
                <div class="form-row">
                    <div class="col-md-6 mb-3">
                        <div class="form-group"> <label>start time</label>
                            <input type="text" formControlName="auctionStartTime" class="time-control form-control" placeholder="Auction start time "(click)="changetime($event,'auctionStartTime');" />
                        </div>
                    </div>
                </div>
            </div>

            <button type="button" (click)="Next('next')" class="btn arrow-btn btn-primary-light btn-lg mx-0 mx-md-2 mt-2 mt-md-0">Next</button> 
        </form>
    </div>
</div>

$(".time-control") datepicker method call on first time script loading.I have two form above one is first form and second form in another component. Then I click next btn in auction component.html and go to detail component. I have two btn back and save. I click back btn. It go to auction component . that time my date picker method is not call in auctioncomponent html file so this my issue. Is it correct or not

angular

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to call jQuery method using CDN script in angular component

Sources

Related Questions