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.
Related
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 -:(
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 running UI Router with angular 4.x. Below code is not rendering anything and I did not get any error message too. But when I changed to $default as a view name, then I am getting the page.Please suggest me.
<app-root>
<ui-view name='main'></ui-view>
</app-root>
Below is the angular State Definition,
export const appState = {
name: 'app',
views : {
main : {
component: AppComponent
}
}
};
When Angular application bootstrap's, it wipes out the inner content of app-root(root) component. What ever you put inside root component will appear until Angular application bootstrap. Generally this place has been used to add Splash screen, loader to show initial loading.
To see your ui-view to replace via ui-router configuration, you should add ui-view inside app-root component HTML.
#Component({
selector: 'app-root',
template: `<ui-view name='main'></ui-view>`
})
export AppRootComponent {
}
I have an angular 2 App built with angular-cli and I need to use an angular 1 directive in one of my components (to re-use it from a different application). I followed the steps from:
https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code
But now I got to this error and cannot get past it. I am using angular2.0.2 (I managed to build a hybrid app in the past with the beta version but it was an angular1 app and I used angular 2 components with downgrade function of the adapter).
In my app.module.ts I have:
import { UpgradeAdapter } from '#angular/upgrade';
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');
#NgModule({
imports: [
BrowserModule,
...
],
declarations: [
...
HeroDetail
]
})
export class AppModule { }
and my hero-detail.component.ts looks like this:
export const heroDetail = {
templateUrl: 'hero-detail.html',
controller: function() {
}
};
and my hero-detail.html looks like this:
<h2>Windstorm details!</h2>
I try to use the directive in another angular 2 component simply by adding in the template:
When I run ng serve, the application compiles fine but when I try to load the page I get the mentioned error.
Any suggestions on how I can move forward with this?
It seems you have incorrect bootstrap logic.
It's actually not quite obvious, make sure that:
you don't bootstrap any ng2 component with #NgModule({bootstrap:[ ... ]}). Instead, you should have empty ngDoBootstrap() { } method in your main module.
root template is ng1 template. I.e. in your index.html you should have only ng1 components or downgraded ng2 components. You can have ng2 component as a root, but you need to downgrade it first.
Official upgrade guide contains an example of DOM structure:
... which ensures that ng2 injectors have all required providers from ng1.
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.