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.
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 am unable to use Panzoom Javascript library in Angular. I get
ERROR
Error: panzoom is not defined
Here is the stackblitz of what i have done till now .
Here is the working demo of how it should work
Can any one help me troubleshoot ? Thanks
I have followed all the steps mentioned in this post
It seems Panzoom does have typescript definitions Github Issue
here is a working stackblitz
import { Component, AfterViewInit, ElementRef, ViewChild } from '#angular/core';
import panzoom from "panzoom";
#Component({
selector: 'hello',
template: `<img id="scene" #scene src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">`,
styles: []
})
export class HelloComponent implements AfterViewInit {
#ViewChild('scene', { static: false }) scene: ElementRef;
ngAfterViewInit() {
// panzoom(document.querySelector('#scene'));
panzoom(this.scene.nativeElement);
}
}
There is an easy way to do this.
Open your angular project in cmd terminal (root of your project, the same foler which contains /src).
Type npm install panzoom --save (that will add panzoom npm package to your angular.json and install it).
In your component add import import * as panzoom from "panzoom" (your project should automaticaly link it with the right file from node_modules.
in ngOnInit or anywhere needed add this line panzoom.default(document.querySelector('#lipsum'));
You should generally incject this PanZoom package in your component constructor after importing it from node_modules but I'm not sure if there is an integration provided by an author.
Definitely check NPM documentation of this plugin for more info
When I generated a new component with Angular CLI I always got a new component with params:
#Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
But now something goes wrong. When I use ng g c [name] I get one more additional param, which I have to import into component, I mean encapsulation: ViewEncapsulation.None
#Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css'],
encapsulation: ViewEncapsulation.None
})
I was trying to reinstall node/angular cli and etc. No result. What do I have to do to create a new components without parameter "encapsulation"
Thanks in advance
Depending on the version of the cli you are using there may be an option that you have set in your config. See if you have the following in your .angular-cli.json
"component": {
"viewEncapsulation": "None"
},
That being said there is a defect in 1.5.0 of the CLI that I found when testing this issue. https://github.com/angular/angular-cli/issues/8383
ViewEncapsulation defaults to Emulated for v2, v4, and v5 of Angular. So if you just remove encapsulation: ViewEncapsulation.None, which is now added to the generated component in v1.5 of the Angular CLI, or change it to encapsulation: ViewEncapsulation.Emulated you'll be using the default.
This can be removed automatically during component generation using the Angular CLI by adding the component ViewEncapsulation defaults to the angular.cli.json see wiki for all available keys.
"defaults": {
"styleExt": "scss",
"component": {
"viewEncapsulation": "Emulated"
}
}
There are three enumerated types of ViewEncapsulation to choose from: Emulated, Native, and None if you're not familiar with ViewEncapsulation see docs. If you're not familiar with ViewEncapsulation and how it relates to the shadow DOM this is a good article.
If you choose to do this manually for each component you'll need to import ViewEncapsulation, which is at the time of writing is missing from the generated component.
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
encapsulation: ViewEncapsulation.Emulated
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
UPDATE
A PR was pushed and merged for https://github.com/angular/angular-cli/issues/8374 that solves this issue. Currently it is only on master so the above will be a stopgap till the do a minor release. After the release if you read the PR everything will be like it was previously.
As #mtpults says, PR was pushed and merged for https://github.com/angular/angular-cli/issues/8374 that solves this issue. Currently it is only on master so the above will be a stopgap till the do a minor release. After the release if you read the PR everything will be like it was previously.
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.