Angular

Angular Samples

Home

1. Create New Component
2. Component To HTML
3. @Input
4. Button Click Event
5. @Output
6. Template Variable
7. *ngFor
8. Safe Navigation Operator
9. *ngIf
10. Hidden Property
11. *ngSwitch
12. Service
13. Routing
14. Routing with Parameter
15. Router Link
16. Module
17. Lazy Loaded Module

Lazy Loaded Module

ng g m User

ng g c user/login

routes.ts


import { Routes } from "@angular/router";

export const appRoutes:Routes=[
{ path: 'user', loadChildren: './user/user.module#UserModule' }
]

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { appRoutes} from './routes';

@NgModule({
	
	declarations: [
		AppComponent
	],

	imports: [
		BrowserModule,
		RouterModule.forRoot(appRoutes)
	],

	providers: [],

	bootstrap: [AppComponent]

})
export class AppModule { }

user.routes.ts


import { LoginComponent } from "./login.component";
export const userRoutes=[
{path:'login',component:LoginComponent}
] 

user.module.ts


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import { LoginComponent } from './login.component';
import { userRoutes } from './user.routes';
import {FormsModule} from '@angular/forms';

@NgModule({

	imports: [
		CommonModule,
		FormsModule,
		RouterModule.forChild(userRoutes)
	],

	declarations: [
		LoginComponent
	]
})

export class UserModule { }