I'm tasked with integrating an existing UI into another already existing Angular app and got hung up on this...
I know the data + transform works well outside of the Angular context.
I didn't see an npm package for the jquery json2html so I tried to import that part in an ad-hoc manner by saving it along side the component's directory.
It produces ERROR TypeError: $(...).json2html is not a function...
...
import * as $ from 'jquery';
import json2html from 'json2html';
import * from './jquery.json2html.min.js';
...
$('#myTable > tbody').json2html(data,transform);
before anything you have to add jQuery in your angular.json then in the component you would to use jQuery with it do so
....
declare let $: any; // you can use "jQuery" keyword instead of "$"
#component({
selector: '...',
templateUrl: ['...'],
styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {
constructor(private eleRef: ElementRef) {}
ngOnInit() {
$(this.eleRef.nativeElement).find('#myTable > tbody').json2html(data,transform);
}
}
when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('selector') to get the element you want
npm install node-json2html
...
import json2html from 'json2html';
import * as $ from 'node-json2html';
...
ngAfterViewInit(){
$('table#myTable > tbody').json2html(data,transform);
}
or,
...
import json2html from 'json2html';
import * as $ from './jquery.json2html.min.js';
...
$('table#myTable > tbody').json2html(data,transform);
Link:- http://www.json2html.com/
Related
I want to use jquery and easypiechart js file's functions in typescript.
It doesn't work this way.
How to define these script what i specified in code as typescript ?
index.component.ts
import { Component, OnInit } from '#angular/core';
import * as $ from "../../../../../assets/plugins/jquery/jquery.min.js";
import { easyPieChart } from "../../../../../assets/plugins/easypiechart/jquery.easypiechart.min.js";
// these above 2 js files are defined in angular.json script section
#Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
constructor() {}
ngOnInit() {
//$(function(){
// $('.easypiechart').easyPieChart();
//});
// How to write this above script as typescript ?????????????????????
}
}
From the above question,it looks like jquery.easypiechart.min.js is the one that you need to use in your angular application as external js.
Put the js under assets folder say /assets/js/jquery.easypiechart.min.js
Goto your projects angular.json file and under scripts node of architect node put as an entry in the array.
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./src/assets/js/jquery.easypiechart.min.js" ]
Now you can refer the external js in any of your projects components
declare var $: any;// referencing jQuery library
#Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
constructor() {}
ngOnInit() {
$(document).ready(function () {
//accessing easypiechart.min.js.
$('.easypiechart').easyPieChart();
});
}
}
If you have included them in the scripts or index.html, you don't have to import them to the .TS file again
Use declare instead and it should work
What does 'declare' do in 'export declare class Actions'?
Instead of putting it in asset folder you should use it as node_modules dependency
For easy pie chart run this npm i easy-pie-chart --save & for jquery run npm i jquery
Normally you don't want to use jquery in Angular, because it usually implies to modify directly the DOM, which is a bad practice, but there is the way to do it: https://medium.com/all-is-web/angular-5-using-jquery-plugins-5edf4e642969
If you wanna plot a pie chart or other types of charts, you could use ng2-charts instead, it will allow you to use charts.js with Angular and Typescript.
I'm working on an Angular4 project and I have created a filter on my app.component.ts which I'm currently using on my app.component.html.
<button (click)="filterBy('cars')">Cars</button>
This works fine in this file by I want to use this same filter on my nav.component.html but I'd like to avoid recreating the filter code again on the nav.component.ts.
Is there a way of using this filter on my nav.component.html from app.component.ts ?
Migrate your created filter code in some new .ts file. Import this file in your app.component and other components by using import {ClassName} from file.ts syntax and then easily implement it in your component html code
You can create service, for example "filter.service.ts". Good thing in service is - it will create only one instance. So you use less memory, and app is faster.
Then - you can include it to the parent module:
import { FilterService } from "some/filter.service.ts";
#NgModule({
declarations: [ AppComponent, NavComponent],
providers: [ FilterService ]
})
export class MyModule { }
And use in your components like this:
import { FilterService } from "some/filter.service.ts";
constructor(filter: FilterService) {
this.filter = filter;
}
And then your html:
<button (click)="filter.filterBy('cars')">Cars</button>
#Injectable()
export class Service{
//create all the logic here for all the things you want to be shared across compponents
}
call this in the component you want to use like
import {Service} from "../shared/service";
#Component({
selector: 'app-angular4'
})
export class Angular4Component implements OnInit {
constructor(private service:Service) {
// resuse all the methods
}
I'm trying to import the npm module "ajv" into my Ionic 2 (Angular 2) project. (https://epoberezkin.github.io/ajv/)
I ran "npm install ajv --save", then made the following changes to my app.modules.js file:
import { Ajv } from 'ajv';
...
providers : [
Ajv,
...
]
When I compile, however, I get the error:
'Ajv' only refers to a type, but is being used as a value here.
c:/Users/me/Documents/Ionic/MyApp/src/app/app.module.ts
Is there a better way to pull in this library?
The providers array in NgModule is for use with #Injectable components or similarly functional "providers" or "services" in other speak. This library does not appear to conform to that design.
It's likely that all you really want to do is use the import within your application component, rather than in AppModule. By import I mean the simple ES6 style import of "symbol" and then direct usage in code.
So for example in example.component.ts:
import { Component } from '#angular/core';
import { Ajv } from 'ajv';
#Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
myMethod() {
// Just use Ajv here
}
}
No need to put this in the decorator arrays.
If an imported third party library is rather something you want to use in a "service like manner", then by all means wrap it as an #Injectable service, but the consumption will stay much the same as the the above example.
I've to do some initialization for my theme after the view has been initialized.
I've implemented AfterViewInit, I've managed to import jquery:
import * as $ from 'jquery';
But now I need to execute this:
ngAfterViewInit() {
$(document).trigger('nifty.ready');
}
And I've trouble, because it seems that at this point, document is not known. I guess I should have another import, but I can't find from where?
My whole app.component.ts:
import { Component, AfterViewInit } from '#angular/core';
import * as $ from 'jquery';
#Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
$(document).trigger('nifty.ready');
}
}
The error I get:
Exception: Call to Node module failed with error: TypeError: Cannot
read property 'document' of undefined at module.exports.module.exports
(E:\My\Clients\AppClientApp\dist\vendor.js:12879:12) at
AppComponent.ngAfterViewInit
EDIT
You can find here the whole web app part.
EDIT2
In fact I've the impression that jquery is not initialized properly at all, once loaded(without error), window.jquery return undefined... any idea why?
You can inject the document in your component.
https://angular.io/docs/ts/latest/api/platform-browser/index/DOCUMENT-let.html
import { Component, AfterViewInit, Inject } from '#angular/core';
import {DOCUMENT} from "#angular/platform-browser";
#Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
constructor(#Inject(DOCUMENT) private document) {
}
}
Instead of importing jquery try this -
declare var jQuery:any;
jQuery(document);
console.log jQuery(document) to be sure
P.S make sure jquery is available on the window scope!
I took a look to your project. Well, I didn't test all the .Net features, but I guess your webpack config misses a plugin provider for jQuery (used to be done by angular-cli).
So you ever done :
npm install jquery --save
Try this :
npm install #types/jquery --save-dev
And then add the jquery plugin provider to your webpack.config.js :
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
Finally import it as follow :
import "jquery";
declare var $: any;
I've been poking around for hours now, but can't get this to work. I'd like to import SimpleBar in my app, but am failing miserably.
TypeError: simplebar_1.SimpleBar is not a constructor
I managed to get the npm package working earlier today, but there were some weird issues with resizing and as the npm package only ships with the minified version I resorted to getting the 'real thing'.
I'm trying to wrap this in a directive like so
import {
Directive,
Input,
ElementRef,
AfterViewInit
} from '#angular/core';
import { SimpleBar } from 'simplebar';
#Directive({
selector: '[simpleBar]'
})
export class SimpleBarDirective implements AfterViewInit {
constructor(private elementRef: ElementRef) { }
ngAfterViewInit() {
new SimpleBar(this.elementRef.nativeElement, {
autoHide: true
});
}
};
However, that gives me the above error message. Luckily I managed to get a Plunker up and running that shows the exact same error.
What am I missing here?
THE PROBLEM
In src/simplebar you declared the export as default by doing export default class SimpleBar{....} and then you imported by using import {SimpleBar} from 'simplebar'
You can only import a default export by doing import SimpleBar from 'simplebar' without the parenthesis.
The parenthisis import style is used when you want to import multiple things from the file eg -
import {SimpleBar, SimpleDialog, SimpleModal} from 'simplethings'
that way there won't be a default export in the file.
THE SOLUTION
use import SimpleBar from 'simplebar' or remove the default modifier in your class export in src/simplebar
Look at here, the sourcecode of simplebar. https://github.com/Grsmto/simplebar/blob/master/src/simplebar.js
They are using export default. They don't export SimpleBar. Therefore, fix your import syntax.
import * as SimpleBar from 'simplebar';