Develop Reference

Use 3rd-Plugins in Angular

I want to use 3rd javascript plugins in my application like Typed.js, AOS.js, mo.js or whatsoever. I still figuring out the proper way to use those 3rd plugins. Although some of them provide a great documentation, I still overwhelmed because there is just few which provide a complete example, I still newbie in Angular
I still figuring out where to put a javascript/jquery code properly in my *.component.ts file, how to import the plugin and all the things related to make the 3rd plugins work.
And also I still looking for the way to listen to the event like mouse scroll. I read about HostListener but there is no easy explanation, so I just use it without complete understanding.
Is there any thing I could read/learn to solve those problem?

You can import the .js file using
1) import * as aos from './AOS.js';
2) create a definition file index.d.ts inside 'login' folder with methods and class.
export declare class AOS{
type: any;
method1(): string;
}
3) In your component, you can import as import { AOS } from './login';
AOS.method1();

Angular2 - Show component name and its html template path in DOM

I have thought of having debugger component in angular2 application which is similar like "Show Template Path" in magento ecommerce feature.
I would like to show the template path on left side and component name from right side of the red bar in DOM itself by trigger the shortcut keys.This could help the developer on debugging the large application.
Kindly advise me, what could be the best possible way of implementing this debugging component. This component should shows every component level information on respective piece of DOM which is being rendered from component used in that page.
Thanks in advance.

Update based on comments:
Use the Reflect package here
After importing it in all your components, use the Reflect.getMetadata('annotations', ComponentClass) method.
From that you can extract your templateURL.
Old
You can use the activatedRoute Interface: Here
It has the URL of the current route and also the component which is activated.
Create a service called DebuggerService and have a property called routeMap in it and provide it in the app.module. Import and inject this service on every component.
So now in every component's onInit or Constructor, you can do something like this:
#Component({...})
class MyComponent {
constructor(private router: Router, debugger: DebuggerService) {
this.debugger.routeMap += (this.router.url + '' + this.router.routeConfig.component.name)
}
}
What you are basically doing is concatenating each route that is activated inside the service. This value will be stored throughout the application because it is globally provided in app.module.
You can now use this property of the debuggerService in your debuggerComponent and print out all routes.
Hope this makes sense.

Angular 2 and component tree

I'm studying Angular 2 internal components and behaviors and I'm having some questions concerning the component tree management.
In a web app based on components, it's clear that we have a component tree. One component is composed of another one, from top to bottom, and it's really powerful.
But now, I m wondering how does angular 2 manages the representation of this component tree internally ?
What I mean there is that we never say in an angular component, what components will be inside of it, except in the template.
For example, I never say in my HomeComponent definition that it owns a PrestaCardComponent :
import { Component, OnInit, Inject } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
prestations: Array<any>;
featurettes: Array<any>;
constructor( #Inject('AppStore') private appStore: any) {
this.prestations = [];
this.featurettes = [];
}
ngOnInit() {
}
}
Except in my template :
<div *ngFor="let prestation of prestations" class="col-md-4 m-b">
<app-presta-card [title]="prestation.title" [content]="prestation.content" [image]="prestation.image"></app-presta-card>
</div>
What I understand it means
It means that Angular 2 is able to create the virtual component tree, by reading the different templates.
How can it be possible ? How does it work ?

Use Augury. you will get a clear insight.

NgModules are key to understanding how Angular deciphers the template when it parses it.
Look into the definition of these properties while decorating with #NgModule,
declarations : List of components, directives, and pipes that belong to this module.
imports : List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
exports : List of components, directives, and pipes visible to modules that import this module.
using this knowledge Angular knows what selector means what, and using Reflection it gets Metadata for the component.
Of course there is more to it, but this may be a start.
Hope this helps!!

All the configuration of your components are rooted in an NgModule.
As Madhu Ranjan already mentioned in his answer there are the following 3 important parts in an NgModule, namely being:
declarations : List of components, directives, and pipes that belong to this module.
imports : List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
exports : List of components, directives, and pipes visible to modules that import this module.
Actually there is even an FAQ for NgModule as it was a major change in the angular2 architecture since (I think) RC5.
Each and every component has to be part of an NgModule. It declares a part of your application which functionalities belong to each other. You can even nest NgModules inside each other with the imports part of it.
A positive part IMO is that you can organize your application very well with this structure as each angular module has its own routing configuration.
Furthermore you can limit accessability of services that should be used by declaring them inside e.g. a (sub-) module of another module just to name a few important features.
Check out the Angular2 Docs for more information about this and many more subjects. It is pretty detailed and IMO very easy to understand as the angular team took alot of effort of keeping it up to date and clean (when you don't mind searching a bit for the parts you need as the topic grouping is kinda crappy in the docs).

App wide variables in Angular2 (RC5)

I want to create an application wide variable accessible between various angular2 components and imported modules.
I have looked at dependency injection in my app.module and thought maybe I could set a class with a property in that. However, with the new angular-RC5 release, this looks like an overcomplication for what I want to do.
Alternatively, I thought of using a #Inputs and #Outputs to cascade the data and subscribe to changes, however, that doesn't seem to be possible between modules.
I would be really grateful for a suggestion of the easiest way of doing this.
In terms of my particular application, I have a navbar component which I want to show on all routes except one. So I have that on my app.component template, with an *NgIf condition, which I then wanted to be able to change from various child components to display the navbar, without having to embed the navbar component in all of my child modules and components (which gets tricky with components being shared between modules. Some of my routes are imported in a module.

You can create a shared service.
something like that :
import { Injectable } from '#angular/core';
#Injectable()
export class GenericService {
data:any = {};
}
and then add it to your app.module.
after that you can inject it to your component and add datas on it who will be accessible from all your components.

This is usually done using a shared service.
For details see
https://angular.io/docs/ts/latest/cookbook/component-communication.html
https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
https://angular.io/docs/ts/latest/guide/ngmodule.html#!#q-why-it-is-bad

Angular2 Http Request returns Observable without map method [duplicate]

This question already has answers here:
Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]
(19 answers)
Closed 7 years ago.
I have setup my application with HTTP_PROVIDERS
bootstrap(AppComponent, [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
PostService
]);
and my service like
#Injectable()
export class PostService {
posts = [];
constructor(http: Http) {
this.http = http;
}
}
but when i call
this.http.get('/posts')
It returns an Observable which has no map method, it drives me crazy for hours. Im using Babel to transpile my javascript code.

The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:
The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.
Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method...
It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.
E.g., as #Langley's comment above shows:
import 'rxjs/add/operator/map';
Or, if we're lazy we can just pull in the full set of operators:
import 'rxjs/Rx';