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
Related
As I can create a component from a service in angular, I want to do it as an alert service and that service has several methods like error () that method would have to add a component to the dom to display the alert, but I don't know how to " inject "or" add "a component of a service to the dom,, any suggestions?
If I understand you correctly what you can do is to create an alert Module with a service to be injected and components.
Configure your alerts and templates in regular components inside the module and import it to your app's top module and then inject only the service wherever you want to use it.
Check out Angular Material Dialog I think you'll find it useful.
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.
For example, I'm using vue-charts.js and imported it into my root component:
import VueChartjs from 'vue-chartjs';
Vue.component('bar-chart', {
extends: VueChartjs.HorizontalBar,
...
})
Now VueChartjs is a wrapper for Charts.js so the component comes with its own template. I'd like to be able to edit that template within VueChartjs.HorizontalBar or the component bar-chartthat I mounted it onto.
Is there anyway to do this within this root component?
You can't edit the template of the vue-chartjs component. Because of the extending, all methods, props etc. will get merged. If some props or methods are duplicated, Vue's merge strategy will use your local ones, instead of the ones in the base class.
However Vue has no merge strategy for templates. So you could only completely overwrite the template. Check the git repo of vue-chartjs to see the template syntax, as some props and ids are required. And then you can replace it in your base component.
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).
In the ember-cli documentation it describes bridging the addon within your host application by overriding the app/component/[addon-name.js] yourself. However, the documentation doesn't explicitly state how to do this.
With trial and error I've noticed that by creating a component file in your [host app]/app/component/[name of addon.js] and simply copy/paste the addon code into there provides a venue to customize the addon. However, this is a terrible approach, I would imagine that I could simply override the functions in question...and in some cases call this.super().functionName in order to keep the over-rides simple and trim.
However, I can't get this to work. Any ideas?
Extensibility is why addons have both the addon/ and app/ trees. In the app tree for a component, the component should just be an import and export, for example:
import XSelect from 'emberx-select/components/x-select';
export default XSelect;
Source: https://github.com/thefrontside/emberx-select/blob/master/app/components/x-select.js
In this kind of case you want to create the component in [host app]/app/component/[name-of-addons-component.js] then in that component do:
import XSelect from 'emberx-select/components/x-select';
export default XSelect.extend({
//any overrides
});