Having trouble retrieving mobiscroll instance in Angular with Ionic

I'm facing an issue with accessing the instance of my mobiscroll widget in Angular 4 with Ionic Framework. Despite following all the correct steps, the actual widget won't get selected.

Below is the code for the widget:

<mbsc-widget [options]="emailLoginSettings" #emailLoginWidget="mobiscroll">
    <div class="md-logo micons icon-mbsc-logo"></div>
    <mbsc-form class="md-form">
        <div class="mbsc-form-group-inset">
        <mbsc-input type="email" name="Email" placeholder="Email" [(ngModel)]="loginEmail"></mbsc-input>
        <mbsc-input name="password" type="password" class="md-passw-field password" placeholder="Password" [(ngModel)]="loginPassword"></mbsc-input>
        <mbsc-button name="login" class="login_button" (click)="loginWithEmail()">Login</mbsc-button>
        </div>
    </mbsc-form>
</mbsc-widget>

In my Angular 4 code, I have added the following:

@ViewChild("emailLoginWidget") emailLoginForm: any;

Despite calling this.emailLoginForm, no functions from mobiscroll are available. Could it be that I missed importing something? It seems like I haven't imported mobiscroll into the file.

If anyone has encountered a similar issue or knows how to access a mobiscroll instance, any guidance would be greatly appreciated.

angularjstypescriptionic-frameworkmobiscroll

Answer №1

Opt for emailLoginForm.instance over emailLoginForm

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

Leveraging es6-promise in conjunction with TypeScript 2.1 and ES5 Webpack for streamlined async/await functionality

Utilizing es6-promise with TypeScript version 2.1.1 that targets ES5 and webpack in my project has presented some challenges. app.ts import "es6-promise/auto"; export class Foo { bar() : Promise<string>{ return Promise.resolve("baz"); ...

typescriptpromisewebpackasync-awaitecmascript-5

The update function now saves only the name property in the database, while the url property is stored as undefined

I utilized nodejs, mongoose, and angular to create a RestAPI with mean stack, focusing on updating provider records in my database. Below is the implementation of the put method: Object {_id: "553d27a24c47696420c6ee39", name: "nn", url: undefined, __v: 0, ...

angularjsnode.jsapimongoosemean-stack

Enhancing the aesthetic appeal of Angular2 Google Maps

Hey there, I'm a newcomer to Angular2/Typescript and I've been working on styling a map in my Angular2 project. I integrated a map using the Angular2 Google Maps Components, but I'm having trouble with applying styles through the undocumente ...

google-mapsangulartypescript

Searching in Angularjs made personal

I am a newcomer to angularjs and I am currently working on a project that involves creating a table with text boxes in each column for searching. The columns include Name, Date of Hike, Gender, Salary, and another Salary field. When I initially searched fo ...

angularjs

Concealed Content Within Drawer Navigation

When using the Material UI permanent drawer component in different pages, I encountered an issue where the main content was getting hidden behind the drawer's toolbar and sidebar. I am unsure how to fix this problem. It seems like a styling issue, bu ...

javascriptcssreactjstypescriptmaterial-ui

Stop md-select dropdown from opening when clicked in specific scenario

I currently have a situation where I want to prevent the md-select from opening under a specific condition and instead display a warning dialog. One way I can achieve this is by disabling the md-select using the following code: ng-disabled="controller.un ...

javascriptangularjsmaterial-designangular-material

I'm looking to locate the API documentation for AngularJS TypeScript

After transitioning from using AngularJS 1.4 and plain JavaScript to now working with AngularJS 1.5 but utilizing TypeScript, I have found it challenging to find helpful documentation. For instance, when trying to inject services like $q or $timeout into m ...

javascriptangularjstypescript

Removing the index from a URL in AngularJS

Currently, the URL structure works with test.com/#/album/0/the-slug-here, but I am aiming for test.com/#/album/the-slug-here. <a ng-href="#/album/{{$index}}/{{project.slug}}">{{project.title}}</a> (function() { var app = angular.module(' ...

angularjs

I am seeking a method to dynamically load the fixed "Character" data in my Angular application from a standalone JSON file

I need help figuring out how to load hardcoded "Character" data from a separate JSON file in my Angular app. Although I have a controller set up for ($http) that has worked in other applications, I'm unsure about how to extract and access character n ...

angularjs

What are the best methods for structuring my inaugural AngularJS project?

My objective is to develop a single page application utilizing AngularJS. While I understand the concepts of AngularJS, I am in need of practical experience when it comes to planning and executing a full project using this framework. The layout is relativ ...

angularjs

The 'roleName' property is not found within the 'never' data type

// ** React Component and Library Imports import { useEffect, useState } from 'react' import Box, { BoxProps } from '@mui/material/Box' import Button from '@mui/material/Button' import Drawer from '@mui/material/Drawer&ap ...

typescriptnext.jsmaterial-uimui-datatable

The functionality of Angular and ui-router is currently experiencing technical difficulties

Hey there, I'm currently experimenting with a basic application using Angular and UI-Router. However, I've run into some issues as it doesn't seem to be functioning properly. When I check in Chrome, there are no errors displayed in the cons ...

angularjsangular-ui-routermultiple-views

Will adding additional line breaks increase the overall length of the code?

Currently, I am immersed in a project involving Angular 4 and TypeScript. Recently, I came across a video showcasing how VSCODE can enhance the code's appearance. Intrigued, I installed the prettier plugin to achieve the same effect. Running this tool ...

angulartypescriptmemoryprettier

The submit button in Angularjs does not respond to the Enter key press

Click below to submit: <input type="submit" ng-click="Showdata()" class="btn blue pull-right" Text="" /> Email input field: <input type="text" ng-model="texttype" class="form-control" ng-class="eml" placeholder="Enter Email" /> Password ...

javascriptjqueryangularjs

Angular: ensure the form reverts to its initial value when the modal is closed and reopened

I am facing an issue with my items section. When I click on an item, a modal window opens allowing me to edit the text inside a textarea. However, if I make changes to the text and then cancel or close the modal, upon reopening it, the previously modified ...

angulartypescriptformsmodal-dialogreset

Tips for getting Angular's HttpClient to return an object rather than a string?

How can I make HttpClient return the data in JSON Object format? The Angular documentation states that HttpClient should automatically parse returned JSON data as an object. However, in my project, it only returns the data as a string. Although using JSO ...

jsonangulartypescript

Tips for passing an array between components in Angular 2

My goal is to create a to-do list with multiple components. Initially, I have 2 components and plan to add more later. I will be sharing an array of tasks using the Tache class. Navbar Component import { Component } from '@angular/core'; impor ...

javascriptangulartypescriptangular-services

Excluding node modules when not included in tsconfig

Within my Angular project, there is a single tsconfig file that stands alone without extending any other tsconfigs or including any additional properties. Towards the end of the file, we have the following snippet: "angularCompilerOptions": { ...

javascriptangulartypescriptnpmtsconfig

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

I am having trouble implementing the TripAdvisor widget on my website. It functions correctly when the page is refreshed, but it does not appear when navigating through links. Additionally, an error message is displayed stating that the document could not ...

javascripthtmlangularjs

Validate the data type based on the property

I have a CARD type that can be either a TEXT_CARD or an IMAGE_CARD: declare type TEXT_CARD = { type: "paragraph" | "h1" | "h2"; text: string; }; declare type IMAGE_CARD = { type: "img"; src: string; orient ...

typescriptsveltesveltekit