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.
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.
We are looking at writing a new app using React but will need some existing Angular Directive that are specific for our business, for example a modified Angular Date Picker for example. There are many components so we won't be able to rewrite them all.
I am wondering if anyone has experience or knows the effort or feasibility of this?
The only article I've managed to find on this so far has been. Most resources I find mention going the other way from an Angular App with added React. http://softeng.oicr.on.ca/chang_wang/2017/04/17/Using-AngularJS-components-directives-in-React/
There's a library called angular2react that makes possible reuse angularjs code inside react components. You can see if it fits your needs. :)
I have written a simple demo app showcasing how to achieve it: react-angularjs-bridge
The basic steps are as follows:
Create a react component that is going to host the angular component in the DOM. This component should always render a simple html element (eg. a HTMLDivElement) so that react does not get confused when reconciling the virtual DOM with the real DOM.
After the react component was mounted componentDidMount, create a shadow root under the rendered HTMLDivElement and initialise the angular application under it. This will ensure that the angularJS component is encapsulated and is not affected by the react application and vice-versa
Click here for a demo. Check how the react application styles do not impact the styles of the angular component.
Independently of Angular, ref is a way to go: it gives to access to an underlying DOM node and the ability to manipulate the DOM inside that node in any way you like, including AngularJS. Your changes will stay - at least until react clears the component altogether.
You can create a ref in react by
<divOrAnyOtherDom ref={((el) => {this._elem=el;}).bind(this)}></...
(for the full description and alternate ways to the same end see here: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)
Anyway, as you now have a DOM node, you can start working with it, i.e. adding angular to the mix inside componentDidMount. Sadly, this is not really obvious - here's a way that has worked for me in the past (moduleName needs to be a module you have put in place already with your logic):
let baseElement = angular.element(this._elem);
let templateElement = angular.element(templateSource);
angular.injector([ 'ng', moduleName ]).invoke(function($compile, $rootScope) {
let cmp = $compile(templateElement);
scpe = $rootScope.$new(false);
scpe.varname = whateverYouHave; # point is: you can set scope variables
cmp(scpe);
baseElement.append(templateElement);
scpe.$digest();
});
Now you have angular inside the DOM node react gave you.
(I've taken this from a slightly different integration: Vaadin to AngularJS, but the principle is the same: Vaadin, just like react, gives you a DOM node. When you're interested in the full code: https://github.com/akquinet/vaangular/blob/master/vaangular/src/main/resources/de/akquinet/engineering/vaadin/vaangular/angular/NgTemplate.js)
Plus: For any callbacks from the angular component, you'll likely have to use setState et al.
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
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
});
I'm trying to test an emberjs component that uses another component. I'm using ember-qunit with the moduleForComponent method.
In there I define that my component needs another component, needs: ['component:my-kitten'].
But it seems that if you use a component with a separate template, then the template of that component is not loaded.
I altered the jsbin example from the emberjs guides.
Working example with template defined in the component as layout
Not working example where I moved the layout to a separate template
The needs property must also include any nested component templates:
...
needs: ['component:my-kitten', 'template:components/my-kitten'],
...
Look for "If you are using nested components with templates" on https://github.com/rwjblue/ember-qunit.
As an update, I'm running into a similar issue and the ember-qunit guides now expressly state
"You do not require dependencies through needs:. Doing so will force the test into unit mode."
Adding needs to my component integration test causes them all to fail, so the above answer is not relevant for current versions of ember-qunit (0.4.17).