'Outlet' property of routing not working in angular6+

Asked
Active3 hr before
Viewed126 times

7 Answers

propertyroutingoutlet
90%

Any component that gets matched by the Router will render it as a sibling of the Router outlet,,How to add the router outlet

Example_snippet/controller/utility/_property.js/ { path: 'contacts',pathMatch:. . .
{
   path: 'contacts',
   pathMatch: 'prefix',
   component: ContactListComponent
}
load more v
88%

Setup navLinks In the app,component

Example_snippet/controller/utility/_property.js/ 1. . .
1
load more v
72%

RouterOutlet is the container where the router render the component when user request a route,,In Angular, you can define a route which will be serve, if the requested URL doesn't match any paths in the routes configuration

Example_snippet/controller/utility/_property.js/ import { NgModule } from '@a. . .
 import {
    NgModule
 } from '@angular/core';

 const routes: Routes = [{
       path: "",
       component: HomeComponent
    },
    {
       path: "about",
       component: AboutComponent
    }
 ];

 @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
 })
 export class AppRoutingModule {}
load more v
65%

Example_snippet/controller/utility/_property.js/ import {Router} from '@angular. . .
import {
   Router
} from '@angular/router'; // import router from angular router

export class Component { // Example component.. 
   constructor(private route: Router) {}

   go() {
      this.route.navigate(['/page']); // navigate to other page
   }
}
load more v
75%

The <router-outlet> tells the router where to display routed views,,path: a string that matches the URL in the browser address bar

Example_snippet/controller/utility/_property.js/ content_copy . . .
      content_copy

      ng generate module app - routing--flat--module = app
load more v
40%

The auth guard is used to prevent unauthenticated users from accessing restricted routes, in this example it's used in app,routing

Example_snippet/controller/utility/_routing.js/ <div *ngIf="message" [ngClass]. . .
<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div>
load more v
22%

Thanks for contributing an answer to Stack Overflow!, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Outdated Answers: accepted answer is now unpinned on Stack Overflow , Meta Stack Overflow

Example_snippet/controller/utility/_routing.js/ <router-outlet></router-outlet. . .
<router-outlet></router-outlet>
load more v