So I am currently trying to use some jquery plugins like Magnific-Popup etc in my Angular 4 application but I'm having some trouble. I installed jquery by doing npm install --save-dev #types/jquery in my terminal and that worked fine, but I'm having trouble getting the actual plugins to work. This is what I tried initially,
#Component({
selector: 'app-showcase',
templateUrl: './showcase.component.html',
styleUrls: ['./showcase.component.css']
})
export class ShowcaseComponent implements OnInit {
#ViewChild("elementRef") elref2: ElementRef;
constructor(private elRef: ElementRef) { }
ngOnInit() {
jQuery(this.elref2.nativeElement).magnificPopup();
}
ngAfterViewInit() {
}
In order to get typescript to recognize the magnificPopup() function, I tried importing the scripts from the magnificPopup documentation into my index.html (at the bottom of the body tag), but as far as I can tell that is not working. Webstorm says "can not resolve file jquery.magnific-popup.js". I'm also loading the jquery.min script as well, and that seems to work fine.
I also tried running npm-install magnific-popup, but that also failed. Additionally, I tried adding the script into the angular.JSON file but to no avail.
I guess what I'm asking is, what is and how can I go about installing and using a third-party jquery plugin like magnific-pop up into my angular 4 application?
Thanks, any help is appreciated.
I have an Angular project where I need to use (for now) a jquery dependent plugin (nanoscroller). I use angular-cli to do all my build processes and my angular-cli.json file has the following under the "scripts" property:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js"
]
Then I use the plugin as follows:
import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer, ViewChild } from "#angular/core";
declare var jQuery: any;
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
layoutMenuScroller: HTMLDivElement;
#ViewChild("layoutMenuScroller") layoutMenuScrollerViewChild: ElementRef;
constructor() {
}
ngAfterViewInit() {
this.layoutMenuScroller = <HTMLDivElement>this.layoutMenuScrollerViewChild.nativeElement;
jQuery(this.layoutMenuScroller).nanoScroller({ flash: true });
}
// etc..
}
Perhaps you can adopt this to your use-case.
Related
I have following problem: im working on Angular project where i need to implement a flowchart editor for witch im using this library:
https://github.com/jerosoler/Drawflow
together with types definition:
https://www.npmjs.com/package/#types/drawflow
All works fine as long as both are imported from npm. But i actually need to change a couple things in the drawflow library and i was trying to add the scripts directly into my project. But as soon as i remove npm package for drawflow im getting following exception:
./src/app/pages/tree-editor-page/components/editor-presentation/editor-presentation.component.ts:1:0-56 - Error: Module not found: Error: Can't resolve 'src/app/drawflow/#types/drawflow' in 'C:\DEV\repos\Digilize\DMS\DMS-Frontend\src\app\pages\tree-editor-page\components\editor-presentation'
Files included in project:
scripts defined in angular.json:
"styles": [
"src/app/styles/styles.scss",
"src/app/drawflow/js/dist/drawflow.min.css"
],
"scripts": ["src/app/drawflow/js/dist/drawflow.min.js"]
Component with types import:
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '#angular/core';
import Drawflow from 'src/app/drawflow/#types/drawflow';
import { combineLatest, first, last } from 'rxjs';
import { DTNode, DTRelation } from 'src/app/interfaces/api/decision-tree-definition.interface';
import { DTStoreService } from 'src/app/services/store/dt-state.store';
#Component({
selector: 'app-editor-presentation',
templateUrl: './editor-presentation.component.html',
styleUrls: ['./editor-presentation.component.scss']
})
export class EditorPresentationComponent implements OnInit, AfterViewInit {
private editor: Drawflow;
...
Im quite new to Angular and i dont know what im doing wrong here. Any ideas?
Just for fun, I'd like to use the javascript library cool-ascii-faces in my Angular application. I followed the instructions in the blog "How to use external JavaScript Libraries in Angular 8".
I did the following things:
installed cool-ascii-faces per npm in my Angular project under node_modules.
In angular.json, added these two scripts to both build and test section:
"scripts": [
"./node_modules/cool-ascii-faces/cli.js",
"./node_modules/cool-ascii-faces/index.js"
]
My app.components.ts looks like this:
import { Component, OnInit } from '#angular/core';
declare var coolFace: any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
ngOnInit(): void{
console.log(coolFace());
}
}
But, in the console I only see: ReferenceError: coolFace is not defined. What have I done wrong?
Thank #Andres O. Serrano for his advice. I tried both approach, neither worked.
But I came up with another solution. Simply store all the ascii faces in a Json file under /asset. Then follow the instruction in the blog "How to Read Local JSON file in Angular". It works like a charm. Thanks!
I want to use this library https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range in my application. But it has to be angular component so for the first time in my short career I wanted to create wrapper of library but I think I did something wrong becouse It doesn't looke like original picker.
This is how it should looks like:
And this is how it looks like as my angular component:
Also when I want to select only month or year it looks weird:
Ok so now time to see my component code:
import {AfterViewInit, Component, ElementRef, Input, OnInit} from
'#angular/core';
import 'bootstrap-datepicker';
declare var $;
#Component({
selector: 'cb-daterangepicker',
templateUrl: './daterangepicker.component.html',
styleUrls: ['./daterangepicker.component.scss']
})
export class DaterangepickerComponent implements OnInit, AfterViewInit {
#Input()
datepickerOptions: DatepickerOptions;
constructor(private elementRef: ElementRef) {
}
ngOnInit() {
}
ngAfterViewInit(): void {
// $(this.elementRef.nativeElement).datepicker();
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
}
}
As You see there is no for example selection of range, or just start and end dates, it simply looks different so I thought it becouse not loaded styles but I might be wrong. I need Your help Guys, maybe my wrapper isn't correctly done?
*Network console with styles:
Addin styles to index.html and angular.json helped with some things:
But still range between dates is not highlighted..
Are you sure that bootstrap is correctly loaded ? you have to check this first and you have to check if the css for the library is loaded afterwards.
try to check that with the browser network console :)
othewise try to call the library style with the cdn :
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css
how to import ouibounce npm package to Angular 6?
ouibounce GitHub repo
ouibounce npm package
Please help me to find out how to import ouibounce npm package to angular. I can install it via npm, but don't know how to import it.
I have created a full working example on GitHub.
The highlights for your question are as follows.
In the project directory run: npm install --save ouibounce
Then to utilize it in a component, you will need to give it a reference to a dom element. The way I'm doing that is through Angular's ViewChild decorator.
In the app.component.ts file I have:
import { Component, ElementRef, ViewChild, AfterViewInit } from '#angular/core';
import * as ouibounce from 'ouibounce';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'ng-ouibounce';
#ViewChild('modal') modal: ElementRef;
ngAfterViewInit() {
ouibounce(this.modal.nativeElement, { aggressive: true });
}
}
In the app.component.html I have <div #modal class="modal">hello world!</div>
The #modal attribute gets matched when Angular creates the AppComponent and assigns its value to the modal property. This is only available at a certain point in the lifecycle of the component, which is why I'm accessing it in the ngAfterViewInit method.
I don't fully understand the ouibounce library, but outside of setting up the mouse listening events to evaluate when the mouse is going off the page, it seemingly only changes the display of the element it is given to display: block;. I have a number of styles in the styles.css file that are just there so that it is readily apparent that the library is working when you pull down the example.
I'm aware there are similar questions but I still can not get it to work..
So I want to use slick.js so I downloaded the files and put it in my assets folder in my angular application
Ive imported the libraries in my
angular.cli.json
"styles": [
"./assets/scripts/slick-1.8.0/slick.css",
"./assets/scripts/slick-1.8.0/slick-theme.css"
],
"scripts": [
//jQuery imports above
"./assets/scripts/slick-1.8.0/slick.min.js"
]
then In my component...
import { Component, OnInit, Injector } from '#angular/core';
import { AppComponentBase } from '#shared/common/app-component-base';
import * as Slick from '../../../../assets/scripts/slick-1.8.0/slick/slick.min.js';
#Component({
selector: 'app-di-type2',
templateUrl: './di-type2.component.html',
styleUrls: ['./di-type2.component.scss']
})
export class DiType2Component extends AppComponentBase implements OnInit {
public constructor(
injector: Injector
) {
super(injector);
}
ngOnInit() {
const slideContainer = document.querySelector('.slider');
slideContainer.slick({
autoplay: true,
autoplaySpeed: 3500,
});
}
}
from what Ive read about importing external javascript libraries into angular application this should work.. Im getting an error in vscode that says [ts] Property 'slick' does not exist on type 'Element'.any
and then in my console im getting
any help would be appreciated!
Thanks!
Install Slick.js using Node and NPM
https://nodejs.org/
npm install slick-carousel --save
https://www.npmjs.com/package/slick-carousel
Once you install this npm, it'll be saved as a dependency in your package.json file.
Then import Slick:
import 'slick-carousel';
someElement.slick();
You can declare the library as a var of type "any" (assuming it has no typing definitions *.d.ts) after your imports in your component if you import the script in your index.html:
declare let <yourlib>: any;