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!
Related
I am trying to use the Typed.js library in Angular CLI, but I couldn't manage to make it work. I followed the instructions in How can I use JavaScript code in Angular 7?: copied the jQuery library and typed scrips in assets folder, added a path to the files in angular.json, but I am not sure what to do in the component.ts file:
This is my component.ts code:
import { Component, OnInit } from '#angular/core';
declare var jQuery: any;
declare var Typed: any;
#Component({
selector: 'app-typing',
templateUrl: './typing.component.html',
styleUrls: ['./typing.component.scss']
})
export class TypingComponent implements OnInit {
constructor() { }
ngOnInit() {
var typed = new Typed('.typed', {
strings: ["First sentence.", "Second sentence."],
typeSpeed: 30
});
}
onComplete() {
}
}
I am pretty sure what I wrote in ngOnInit() is wrong, but how can I make it right?
You have to import typed.js in order to be able to use it. Declaring it as variable with type of any does not make any sense. Try importing it instead like this:
import Typed from 'typed.js';
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.
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.
Quite new to Angular 2, and after looking around for few hours I'd like to have some help.
I have a JS file with some generic functions. For example:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
This file contains in fact way more code. As you can imagine, I'd like to enable tooltips of all components. I can't simply include this file in index.html because subcomponents aren't present (yet) when the file is loaded.
After some digging, afterViewInit() came up. This post suggests to copy/paste JS code into ngAfterViewInit(). That's the ugly way (in my opinion)...
So here I come with 2 related questions:
1# Is there a way to execute JS code when a child component is loaded? For example, something like:
// In app.component.ts
ngAfterChildComponentLoaded(){
// JS code here
}
This solution is quite interesting because I'm not forced to implement ngAfterViewInit() with the same content in all my components. But is it possible?
2# Is there a way to import JS code instrad of copy/paste it into ngAfterViewInit()? I don't want copy/paste 300 lines of JS code into 15 differents components (for obvious reasons).
Thanks a lot for your help!
See the following for how to get external js files for a particular component in angular 2/4:
import { Component, OnInit , AfterViewInit} from '#angular/core';
import { Router } from '#angular/router';
declare var $: any;
#Component({
moduleId: module.id,
selector: 'dashboard',
templateUrl: './dashboard.html',
styleUrls: ['./dashboard.css']
})
export class DashboardComponent implements OnInit,AfterViewInit {
constructor() {}
ngOnInit() {
}
ngAfterViewInit(){
$.getScript('assets/assets/build/js/custom.min.js');
}
}
Got a less-ugly solution, if someone has a better one I'll gladly accept his answer!
ngAfterViewInit(){
$.getScript('assets/js/myscript.js', function(){});
}