We have an Hybrid app (AngularJS 1.6 & Angular 5) which uses Kendo UI for AngularJS. Architecture of the AngularJS side of the app is fully based on components. We are slowly moving each AngularJS component to Angular and have one component which is using Kendo UI Validator (https://demos.telerik.com/kendo-ui/validator/angular)
I have attempted using angular/upgrade/static approach, but does not really work
#Directive({selector: '[kendo-validator]'})
export class KendoValidator extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('kendoValidator', elementRef, injector);
}
}
Does anyone know if there is any way to use Kendo UI AngularJS components in Angular 5 components. For number of reasons (our of my control) we are not in a position to upgrade to Kendo Angular UI as yet -:(
Related
I am trying to convert angular components to angular web component, I followed few articles to do it which is good, but when I tried to convert angular directive as web component it throws some error which I am not able to figure out what is wrong I am doing, also I don't have any idea on can we convert an angular directive to angular web component. Below is code which I tried to convert directive as web component.
Tooltip Directive:
<pre>#directive({
selector: '[tooltip]'
})
export class TooltipDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.classList.add('my-tooltip');
}
}</pre>
Creation of tooltip web components snippet:
<pre>export class AppModule implements DoBootstrap {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const webTooltip = createCustomElement(TooltipDirective, {
injector: this.injector,
});
customElements.define("web-tooltip", webTooltip);
}
}
</pre>
How I am trying to use in app HTML file is below code
Web tooltip selector:
<span web-tooltip id="tooltip" content="This is a tooltip.">
enter image description here
If I try to write same code for any component its working fine but for directive as I shown code above its not working.
I would like to downgrade an angular 6 directive defined something like this
#Directive({
selector: '[ad-host]',
})
export class AdDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
to angular 1.7 but angular https://angular.io/api/upgrade/static module contains downgradeComponent only.
any suggestion how to do so.
the main problem that I am trying to solve is to achieve parent-child communication for children rendered using by the parent and as per https://blog.angular-university.io/angular-ng-content/ blog I can achieve by having inputRef directive.
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
I am building an application using angular and redux (ngRedux). Now i want to use react instead of angular for improvement in performance. It is a huge application so it is not possible to build it from scratch. So i want to use the routing of angularJS (angular-ui-router) and as any "abc" state become active then the react component become load and this react component should use the pure redux against every single event.
How can i maintain my application accordingly that a single module is build in react-redux and connected to angular only through routing state. Keep in mind that the other modules of application should also not be disturbed.
Well to render React components into Angular is quite easy. But I just assume you use directiveor component from angular already.
So in the case of directive you could skip the whole templating "none sense" and let React handle that for you
module.directive("reactTest",function() {
return {
link:function(scope,element,attr) {
class App extends React.Component {
constructor(props) { super(props) }
render <div></div>
}
element.replace(App);
}
}
});
So this how you would get React into Angular. Redux ist basically the same. You simple use the connect function of redux and off you go.
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.