Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime.

Below is the code snippet:

export class TimePicker{
   @Input() minTime : string;
   @Input() maxTime : string;
   @ViewChild('timePicker') tmElement : ElementRef;

   ngAfterViewInit(){
     $(this.tmElement.nativeElement).timepicker({
            timeFormat: 'h:mm p',
            minTime: '11',  --> Need this.minTime ?? 
            maxTime: '6:00pm',  --> Need this.maxTime ??
            dynamic: false,
            dropdown: true,
            scrollbar: true,
            change: (time)=> {
                this.changedTime(time);
            }
        });
       }


changedTime(time : Date){
  // This method is easily called due to fat arrow
}

I have attempted using the bind method without success. Since I plan on utilizing jQuery sporadically, this implementation will be beneficial in the long run. Thank you :)

javascriptjqueryangulartypescript

Answer №1

Give this a shot.

Make sure to define variables minTimeVal and maxTimeVal within the method and utilize them accordingly.

export class TimeSelector{
   @Input() minTime : string;
   @Input() maxTime : string;
   @ViewChild('timeSelector')    tsElement : ElementRef;

   ngAfterViewInit(){
     var minTimeVal = this.minTime;
     var maxTimeVal = this.maxTime;

     $(this.tsElement.nativeElement).timeselector({
            timeFormat: 'h:mm p',
            minTime: minTimeVal, 
            maxTime: maxTimeVal,
            dynamic: false,
            dropdown: true,
            scrollbar: true,
            change: (time)=> {
                this.timeChanged(time);
            }
        });
       }


timeChanged(time : Date){
  // Utilizing fat arrow makes this easy
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve the content of an element using JavaScript?

I'm currently working on retrieving the value and content of an option element. I've managed to obtain the value using this.value as shown in the code snippet below: <select name='name' id='name' onchange='someFunctio ...

javascriptphp

Exploring the PayPal Checkout JavaScript SDK's CreateOrder call and interpreting the response

I am currently exploring how to use the JavaScript SDK to display PayPal payment buttons on a website. I am new to working with JSON and REST API calls, so I am facing some challenges in implementing this. The createOrder function is running smoothly and ...

javascriptjsonpaypalpaypal-rest-sdk

JavaScript - AJAX Call Terminated after a Period on Secure Socket Layer (SSL)

Currently, my AJAX calls over an SSL connection using the Prototype JS framework run smoothly initially. However, after 10 seconds of being live on the page, they start failing with a status of 0 or 'canceled' in the Network Inspector... This is ...

javascriptajax

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Issue Description: I am facing an issue on the order page where I need to link the "Continue" button to a booking page. After reaching the booking page, I expect users to be able to navigate between the two pages seamlessly even when they use the browser& ...

javascripthtml

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Currently, I am executing a script inside a Pug template. The script commences by fetching an array of JSON objects from MongoDB. I then stringify the array (data) and proceed to loop through it in order to access each individual JSON object (doc). Subsequ ...

javascriptarraysnode.jsjsonpug

Attempting to establish a connection with Redis through the combination of TypeScript and Node.js

Currently, I am attempting to establish a connection with Redis using TypeScript and Node.js. However, I am encountering an issue where **error TS2693: 'RedisStore' is designated as a type but is being utilized as a value in this context.** let r ...

node.jstypescriptexpressredisbackend

Utilizing JQuery for Ajax Requests to Modify User-Agent Strings

When using JQuery to send an AJAX request to my own Webservice, I encountered a challenge with setting or modifying the User-Agent HTTP-Header for the request. Despite attempting to use the setRequestHeader Method as suggested by some users, it did not w ...

jqueryajaxuser-agent

To effectively execute a JQuery / Javascript function, it is essential to incorporate both $(document).ready and $(document).ajaxSucces

I have a JavaScript function that is used for basic UI functionality across my site. Some elements affected by this function are injected via Ajax, while others are static HTML. Currently, I have duplicated the function and applied it to both $(document). ...

javascriptjqueryajax

Creating controller functions for rendering a form and handling the form data

When developing a web application using Express.js, it is common to have separate controller functions for rendering forms and processing form data. For instance, if we want to import car data from the client side, we might implement the following approach ...

javascriptnode.jsexpress

Delaying consecutive calls to query on mouse enter event in React

Currently, I have a React component from antd that utilizes the onMouseEnter prop to make an API query. The issue arises when users hover over the component multiple times in quick succession, which floods the network with unnecessary API calls. To prevent ...

javascriptreactjs

Continuously receiving unhandled promise rejection errors despite implementing a try-catch block

Every time I run my code, I encounter the following issue: An UnhandledPromiseRejectionWarning is being thrown, indicating that a promise rejection was not properly handled. This can happen if you throw an error inside an async function without a catch bl ...

javascriptnode.jsparsingpromiseparse-platform

Is there a way to include e.preventDefault() within an ajax call?

After the user clicks the submit button on my form, the handleSubmit function is triggered. However, I am having trouble calling e.preventDefault() inside my AJAX call due to its asynchronous nature. How can this issue be resolved? class FormRegister ex ...

javascriptajaxreactjs

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

Is there a live password verification tool available?

Currently, I am conducting some initial research for my school's IT department as a student employee. The students at our institution are required to change their passwords every six months, but many of them struggle with the various password regulati ...

javascriptajax

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

javascriptjqueryhtmlcss

The ASP.NET Core 3.0 Web API method consistently encounters null values

I've encountered an issue with my Angular app where it displays a 500 server error. Here are the methods I'm using: /*Product Service*/ addNewProduct(newProduct: Product): Observable<Product> { console.log(newProduct); return this.http.po ...

angularasp.net-corehttp-post

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss

Adding OPTIONS into a SELECT using jQuery - Ensuring compatibility across all platforms, including Internet Explorer 6

Looking for a way to add OPTIONs into a SELECT element using jQuery that works across different platforms. I vaguely remember encountering an issue with IE6 where nothing happens when trying to insert options: <select id="myselect" size=" ...

jqueryselectappendinternet-explorer-6

How to use JQuery to inject a variable containing HTML into a specific div element?

Hey there, I have a basic webpage with a div element (let's name it #content) that holds HTML content I want to save to a variable. <div id="content"> <div id="left"> <h1>Awesome heading</h1> <p>text</ ...

jquery

Checking the status: Real-time validation of checkboxes using jQuery

I am currently utilizing the jQuery validation plugin known as jQuery validation. In my code snippet below, I have a straightforward validation method that checks the number of checkboxes that are selected based on a specified parameter: $.validator.metho ...

jqueryjquery-validate