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 {
}
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 have created a mat-dialog component to fire for http response. When I include a ngIf statement inside the html for the mat-dialog,it is not handled. On the console it shows a warning as follows.
Can't bind to 'ngIf' since it isn't a known property of 'div'.
NgIf works fine in all other components in the project.
Calling for mat-dialog inside typescript file.
this.matDialog.open(PaymentModelComponent, {
width: "630px",
data: { message: response.comment },
autoFocus: false,
height: "630px",
});
html code
<div *ngIf="true"><p>Show this only if "show" is true</p></div>
Why do ng-if don't work inside a mat-dialog ?
All I needed to do was to add the DialogComponent to the module's declarations:
declarations: [..., MyDialogComponent]
No need to have the component code in the same file.
All you need to do is add the dialogs to your module imports & declarations. In the same module where the component your dialogs are declared in is declared.
I am posting this hoping that someone may find it useful. This is not the exact answer for this problem, but this is how I overcome my scenario. In my case I was using mat-dialog component as an entry component inside the app.module.ts
entryComponents: [ErrorComponent, UserAccountInfoReloadPopupDialogComponent],
For some reason, ng-if it is not working inside the dialog. It is not only for ng-if, all others like ng-for were not available.
I fixed the issue by defining both components in the same ts file.
#Component({
selector: "app-account-info",
templateUrl: "./account-info.component.html",
styleUrls: ["./account-info.component.css"],
})
export class AccountInfoComponent implements OnInit {
//code
}
#Component({
selector: "user-account-info-reload-popup-dialog",
templateUrl: "./payment-modal.component.html",
styleUrls: ["./payment-modal.component.css"],
})
export class UserAccountInfoReloadPopupDialogComponent implements OnInit {
//code
}
Then I defined the newly created mat-dialog component inside angular module declaration.
#NgModule({
declarations:
[
UserAccountInfoReloadPopupDialogComponent
],
This fixed my issue. You can check the angular mat-dialog documentation.
https://material.angular.io/components/dialog/overview
I don't know how to do wildcard path routing in an app that's half-upgraded from AngularJS to ng2.
In general, you mix both kinds of routing like this:
The first step to have a dual router setup is to add an Angular root
component containing one outlet for each router. AngularJS will use
ng-view, and Angular will use router-outlet. When one is using it's
router, the other outlet will be empty.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div ng-view></div>
`,
})
export class AppComponent { }
https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs
In Angular 2 you can specify a wildcard path like this:
{ path: '**', component: PageNotFoundComponent }
In AngularJS you can have a wildcard path like this:
$routeProvider
.otherwise({
template: '<page-not-found></page-not-found>',
});
When I put everything together and a path isn't handled, how do avoid both routers from emitting <page-not-found> ?
I can confirm that <div ng-view></div> does work in the angular 2 AppComponent component if everything else is set up right. (Add AppComponent to AppModule's bootstrap array).
Use HybridUrlHandlingStrategy to prevent Angular from throwing an error when an ng1 route is requested.
Add dummy routes with empty ("") templates to prevent ng1 from rendering 404 page when an ng2 page is requested:
$routeProvider
.when('/some/ng1/path', {template: '<something></something>'})
.when('/some/ng2/path', {template: ''}) // ng2 route
.otherwise({template: '<page-not-found></page-not-found>'});
Im using the angular.js 1.5.8 framework along with "oc.lazyload" library for lazy loading applications.
Now, i'm trying to load a "child" component from parent component (ie. lazy load the component "navigation" into the "main") but it doest work.
Main component:
angular.module('app', [
'ngRoute', 'oc.lazyLoad'
]).component('main', {
template: '<navigation></navigation>',
controller: function($ocLazyLoad: any) {
return $ocLazyLoad.load('ui/navigation.js');
}
})
)
Navigation.js:
angular.module('app').component('navigation', {
templateUrl: './ui/navigation.html'
});
When i look into the developer console it shows me that only the navigation.js file is loaded and not the template (navigation.html)
It does work when i'm using it with ngRouter resolve property however. Is there anything similar i could use for components?
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.