I am working on a project in Angular 1.7.2 that utilizes some components that were built in Angular 5/6. We are downgrading the components using the downgradeComponent tool and everything is working just fine.
We recently added a new component that we need to integrate with but we need to access the components properties as well. I was looking into the ngRef directive but that does not seem to be working and I'm unable to find any other ngRef examples outside of the Angular documentation. When I add the ngRef and bind it to a variable in the current scope, it never gets assigned. Any help would be appreciated!
Angular 5 component
export class ImportedComponent implements OnInit {
variable1: boolean = true;
variable2: boolean = false;
constructor(private certService: ImportedComponent) { }
ngOnInit() {
this.variable1 = true;
this.variable2 = false
}
}
Html - w/ AngularJS 1.7.2
<imported ng-ref="importedProperty" ></imported>
<custom-button ng-if="importedProperty.variable1" [disabled]="!importedProperty.variable2"></custom-button>
Downgrading
angular
.module("blah", [])
.directive(
"imported",
downgradeComponent({ component: ImportedComponent }) as angular.IDirectiveFactory
);
The downgrading for the imported component is working because the HTML is showing up and I'm able to see the console.log()s occurring from their end but when I try to access importedProperty, I get undefined (or empty object if I initialize it as such in my scope prior)
I ended up working with the component owner who is now passing the data back as an event. I then listen for that event and use those properties accordingly
Related
I have troubles with ui-router and angularjs scope after changing state - new created scope uses old controller (or vise versa).
I use AngularJS "angular": "1.5.8", and ui-router "#uirouter/angularjs": "^1.0.22", components written in ES6 style as classes.
Component example:
import template from './my-container.html';
export const MyContainer = {
bindings: {
},
template: template,
controller: class {
constructor($scope) {
'ngInject';
this.$scope = $scope;
...
Route/State definition:
.state('mystate', {
url: '/mystate',
component: 'myPage' // in myPage <my-container>
})
Problem:
On first page load everything works correctly. But when I change state and go back - any changes don't appear in template.
I mentioned that $scope.$id was changed but my controller still use previous scope object.
For debugging I added two console prints: inside onInit and myUpdateData functions.
On first screenshot we can see correct ids (init, update func, from template/dom element):
And after changing states (wrong behavior):
future calls updateData - it uses old (14 on scr) scope but rendered new one. So we don't see any changes in template.
Any ideas how to find out from this situation?
Solved.
Issue was in components code - I forgot to remove all references on previous controller instance and after changing state this controller left alive in memory (I'm not sure how it has been connected to new scope object but it describes solution).
When you got behavior like this - try to leave almost empty component and you will find bug.
I am unable to inject resolve property of ui-routing in controller.
It is giving
Error: $injector:unpr
Unknown Provider
When I'm using controller property in state definition object as following
.state('widget', {
url: '/widgets',
template: '<h1>{{name}}</h1>',
controller: function(widget, $scope) {
$scope.name = widget.name;
},
resolve: {
// standard resolve value promise definition
widget: function() {
return {
name: 'myWidget'
};
},
// resolve promise injects sibling promise
features: function(widget) {
return ['featureA', 'featureB'].map(function(feature) {
return widget.name+':'+feature;
});
}
}
});
Then it is working fine and I'm able to get the widget in controller and able to use in html.
Please see the fiddle for code.
http://jsfiddle.net/sunilmadaan07/ugsx6c1w/8/
Might be I'm making a silly mistake.
Before posting this question I have tried returning with simple object, promise object to the property.
Thanks In Advance.
You can not get resolved data in the directive with the code you did. Basically, you are trying to implement component based structure with an older version of angular 1.3.x.
You have two options to achieve this.
Create route controller then you can access resolve to the controller as local dependency then use that dependency as binding to the directive.
Here is example - http://plnkr.co/edit/TOPMLUXc7GhXTeYL0IFj?p=preview
Upgrade angular version to 1.5.x and use "ui-router-route-to-components": "^0.1.0"
Here working example of your code - http://jsfiddle.net/ugsx6c1w/25/
In order for the controller to be able to use resolvers, it should be route component (only in UI Router 1.x) or route controller.
widget and features are local dependencies, they aren't registered in the injector and aren't available anywhere in the application except route controller/component.
As explained here, resolvers can be passed to nested components in UI Router 0.3.x and injected directly to route components in 1.x.
I have an old Angular1.5 app, quite a large code base.
I'm now using ngReact to instance React from within an angular directive.
This is all working correctly. My new react 'sub-app' for want of a better phrase is working ok.
But now I need to call an ng-click in part of the old Angular app from React. The Angular ng-click then pops up a modal. The ng-click in the controller is in scope so it's available i.e. it's module is loaded into the browser.
Any ideas how to do this ?
I do have Redux instanced in Angular using ngRedux and available in React, could I dispatch from React and get the controller to respond to this dispatch / action ?
Does this seem ok ?
The answer to my question is yes, I can use Redux and subscribe to the redux state change in the angular controller with something like this
var unsubscribeRedux = $ngRedux.connect(this.mapStateToThis, fireAddTaskEvent )(this);
$scope.$on('$destroy', unsubscribeRedux);
this.mapStateToThis = function(state) {
console.log("fired from react");
return {
value: state.addTasks
};
}
It's crude at the moment, but works
I'm using Angular 1.5+ with Typescript, preparing my code to be compatible with Angular 2. I've got a situation where many of my components need to use an application-wide repository location for the views that are mapped to their templateUrl properties, but sometimes a view needs a specific, local implementation.
So, normally the views are hosted on a fast-served CDN, they're re-used between multiple sites that all belong to the same general code base, api, etc. This is done to prevent duplicating them and to centralize what doesn't need to be repeated.
Rarely, I'll need to override this behavior and use a more specific, fine-tuned view. So my approach to this was to add a binding to the components called viewLocation, with the intent to use it like this;
<component-name></component-name> is the default. In this situation, the default CDN path is used.
<component-name view-location="local"></component-name> is a unique situation. If this happens, the templateUrl should be able to respond to that and switch to a path relative to the specific application and not from the CDN.
I thought it would be pretty simple until I realized that I wouldn't have access to the binding properties within the actual constructor or templateUrl function, as is demonstrated here;
export class SidebarComponent extends Component {
constructor() {
super();
this.bindings = { viewLocation: '=' };
// other properties
this.templateUrl = ($someService: IServiceInterface): string => {
// help! I don't have access to the viewLocation property!
}
}
}
So is there anything else I can do to get access to that property?
This is not done in TS, but the AngularJS 1.5 component generally provides the $element and $attrs to the $injector when you are using an injectable template.
This is an example in AngularJS using Javascript where the template URL is picked based on an attribute set on the component:
angular.module('example', []);
angular.module('example').component('myComponent', {
templateUrl: function($element, $attrs, $log) {
$log.info('determining template to be used');
if($attrs.useTemplate) {
return $attrs.useTemplate;
}
return 'default.html';
}
});
Template snippet:
<my-component use-template="hui.html"></my-component>
<my-component use-template="bu.html"></my-component>
<p></p>
<my-component></my-component>
Working example:
template injection in an angular 1.5 component
I used to build applicaitons with angular1, there was possible to have directives on the allready loaded DOM elements, it was like you have the main component (app), wich is build from loaded html and then inside you can load directives from ether loaded html or load it from URL.
Howewer in angular2 it seems that to bootsrap application I have to use component which requires me to have template/templateURL, which I think is not nessesery since I don't want to load seperatly menues and other common stuff, I would rather do that on server level then laoding it seperatly. Does anyone knows how could I achive this in angular2?
In Angular2 you need to bootstrap a component and a component needs to have a view. Directives can't be bootstrapped. Directives can't be added or removed dynamically, they are only applied where static HTML in a components view matches their selector.
To me it sounds that for your use case Angular1 is the better fit.
You can have directives but as #Günter Zöchbauer mentioned before you will need to bootstrap a component..
Change detector are created when a component is first instantiated. Here is an exaple for ng2 Directive from Angular documentation :
class Greeter {
greet(name:string) {
return 'Hello ' + name + '!';
}
}
#Directive({
selector: 'needs-greeter'
})
class NeedsGreeter {
greeter:Greeter;
constructor(greeter:Greeter) {
this.greeter = greeter;
}
}
#Component({
selector: 'greet',
viewProviders: [
Greeter
],
template: `<needs-greeter></needs-greeter>`,
directives: [NeedsGreeter]
})
class HelloWorld {
}
See for more details: https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html#!#constructor
But keep in mind that:
Each Angular component requires a single #Component annotation. The
#Component annotation specifies when a component is instantiated, and
which properties and hostListeners it binds to.
When a component is instantiated, Angular
creates a shadow DOM for the component.
loads the selected template into the shadow DOM.
creates all the injectable objects configured with providers and viewProviders.