I am using Angular 6 and trying to call the mask function of the jquery.maskedinput javascript library in my ts file. The mask function in VS Code was not showing up or compiling so I found a type definition file and added it to the node_modules. Now intellitype finds the mask function and the squiggles go away. However I still get a compile error. What am I missing to have the page compile and use the mask function?
component.ts
/// <reference path="../../../../node_modules/#types/maskedinput/index.d.ts"/>
.....
$("#dob").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
node_modules/#types/maskedinput/index.d.ts
interface JQuery {
mask(mask: string, options?: JQueryMaskedInputOptions): JQuery;
}
I am not sure what I am missing at this point. Any guidance will help.
Thanks
I found the answer in another post with a similar issue here.
My issue was that I added the reference after my imports and not at the top of the page per documentation. Once I added the line below to the top of my component everything started working.
/// <reference path="../../../../node_modules/#types/maskedinput/index.d.ts"/>
Documentation -
Typescript Triple-Slash Directives
Related
I am using this stackblitz to create mat-select. I copied the whole code including the mat-select folder and module. The whole code compiles perfectly without any error or issues. However, during page rendering time the code breaks and I get error Unexpected directive 'MatSelectSearchComponent' imported by the module 'AngularMaterialModule'. Please add a #NgModule annotation.
In the main HTML page where I am trying to use the mat-select there on mat-select-search tag, I am getting an error that mat-select-search is not a known element.
Although the code compiles without any error.
I tried importing mat-select-searchmodule in layout.component.ts then I am getting the below error
Type MatSelectSearchComponent is part of the declarations of 2 modules: MatSelectSearchModule and InsertModule! Please consider moving MatSelectSearchComponent to a higher module that imports MatSelectSearchModule and InsertModule.
VScode error screenshotI generated a new component(bmi calc) in my angular app, then downloaded a html/css template of bmi calculator functionality and pasted the html and css content of the template into the bmicalc.component.html & bmicalc.component.css file in my app, but the app is not running?
This is my error(the image of my error)
As code given in your github files , below is working piece of code. I just updated your code.
You can check the updated code here on StackBlitz(Working) -
You can check demo here
Note : =I have just updated your code to make it work only as you got
those Uncaught error of compute function. Not sure about correct
calculation so you need to look on that part.
Just few suggestions
Add code snippet when you ask this type of question
Use appropriate names to variable, Avoid use i, ii, fv, kv type of variables.
.ts file is there to write presentation logic whatever you want to apply on the form.
Your code should be well-formatted. Clean html.
Avoid using inline css, Use .css file for it.
Hi I have started working on angular2. I came across a scenario where I have to put external javascript file in my angular2 application. I have tried as below.
At first I created testjs.js file and I added the below code
function test() {
alert('TestingFunction')
}
Then in index.html I referenced as below.
<script src="~/ClientApp/Assets/testjs.js"></script>
Then I have fetchdata.component.js file. I added below code into it.
declare var test: any;
f() {
new test();
}
Finally in fetchdata.component.html I added below code.
<h1>
<button (click)='f()'>Test</button>
</h1>
When click the button it prompts below error in browser.
FetchDataComponent.html:26 ERROR ReferenceError: test is not defined
at FetchDataComponent.f (fetchdata.component.ts:15)
Can someone help me in this issue? Any help would be appreciated. Thank you!
EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.
What i've tried:
I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.
I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.
Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.
Kind regards Chris
Did you tried putting this code in your component that is responsible for viewing the map?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
#ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?
Normally when there are no errors, a triggerResize() will fix your issue.
In the past, there was a simple trick, to include the flex mxmlc module by adding the following line to the flash-cs4 makefile:
-include-libraries “/absolute/path/to/my/assets/assets.swc”
This gave you the ability to use getDefinitionByName, an helper function to access the embedded swc asset-library (instead of creating hand-written classes all assets).
Unfortunately, this has stopped working since flash-cs4. Does anybody know another solution?
Unfortunately, the only workaround I have found is to explicitly refer each of asset classes somewhere in the code. You may create dummy class like this:
public class AssetsExporter extends Sprite
{
public static function export()
{
AssetClass1;
AssetClass2;
//etc
trace( "DEBUG AssetsExporter.export()" );
}
}
Specify this class as Document class in Flash IDE, so it will be compiled into the resulting swc. Then in the main code of your application call
AssetsExporter.export();
After doing this you will be able to use getDefinitionByName().
You can add them to the libraries in the publish settings.
(Image from http://wiki.gigya.com/ via Google Images)
By the way, if you use SWC files, you can also do
new somepackage.SomeClass();
instead of
new getDefinitionByName("somepackage.SomeClass")
where applicable. This is because SWC files are included at compile time, not runtime.
Even though you can change a compiler setting manually, its easy if you are using FlashDevelop as this is very simple to fix.
Right click your included swc from the Project list. Choose options then "include library (complete library)".
..you can now use getDefinitionByName to get an unreferenced class from your swc file.