Develop Reference

Navigate to component in another module (Angular)

I have app.component which is creating by default and here is a button. When I click it, I want to go to login.component.
Here is my app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { AppComponent } from './app.component';
import { MatButtonModule } from '#angular/material/button';
import { MainModule } from './main/main.module';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MatButtonModule, MainModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Here is my app-routing.module.ts code
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from '../main/login/login.component';
const routes: Routes = [
{ path: 'main', children: [{ path: 'login', component: LoginComponent }] },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Here is how I try to do this - <button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>
Here is stackblitz url to check code Stackblitz
My problem is, that link changed to localhost:4200/main/login, but view not changed.
How I can solve this?

This is a CSS issue. split left and spit right do not give the login component inside any space. Instead, have your main page (main-page) (the page with the login and sign up button) as its own component, and have split right only having the router outlet.
app.component.html
<div class="split left">
<div class="centered">
<h1>Learn what you want.</h1>
<h1>Teach what you love.</h1>
</div>
</div>
<div class="split right">
<router-outlet></router-outlet>
</div>
main-page.component.html
<div class="centered">
<div>
<button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>
</div>
<div style="margin-top: 20px">
<button mat-raised-button class="btn-default-transparent">Sign up</button>
</div>
</div>

I created a bug-fixed version here for you: Stackblitz
Your problem was that it loaded but behind the app.component.html template.
You created a main module for LoginComponent. When You have more than one module the best practice is to use Lazy Loading which I created for you on my demo. In addition, it's better that app-component, mean main app just have <router-outlet></router-outlet> and content loads from other component.

So the problem was not in CSS
Problem was that I need to have all components to be separate and have <router-outlet></router-outlet> only in app.component.ts file.

When I import the formsmodule in angular my button seems to not working after that

When I imported this "import { FormsModule } from '#angular/forms';" on my angular project. it seems that my button is not working anymore. if I click on it there's nothing.
This is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
This is My Home HTML
the button class is btn
<div class="container color-dark">
<div class="col">
<p>Add you Bucket List</p>
</div>
<div class="col">
<p>Your Bucket List ({{ itemCount }})</p>
</div>
</div>
<div class="container color-light">
<div class="col">
<p>Use this form to add a new Bucket List!</p>
<form>
<input type="text" class="txt" name="item" placeholder="Life Goal.." [(ngModel)]="goalText">
<input type="submit" class="btn" value="Add Item" (click)="addItem()">
</form>
</div>
<div class="col">
<p class="life.container">
I want to climb a mountain.
</p>
</div>
</div>
This is My home.compenent.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
itemCount: number;
btnText: string = 'Add an Item';
goalText: string = 'My First Life Goal';
goals = [];
constructor() { }
ngOnInit() {
this.itemCount = this.goals.length;
}
additem(){
this.goals.push(this.goalText);
this.goalText = '';
this.itemCount = this.goals.length;
}
}
I tried searching it on google but nothing pops up or am I just looking at the wrong side of the code. if you have an idea or tips that can help me solve this, I would really appreciate it

in home.components.ts correct the function name from additem() to addItem() it will work . capital I should be used that's why it's not working

Create multistep form without angular ui router

please look image description hereI need to create a multi step form without using Angular UI Router & angular material.
could any one help me.
<div class="wizard">
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/information-form']" [routerLinkActiveOptions]="{exact: true}">
Submit Information
</a>
<a [class.disabled]="idTab" routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/id-form']" [routerLinkActiveOptions]="{exact: false}">
Submit Id
</a>
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/verify-identity']" [routerLinkActiveOptions]="{exact: false}">
Verify Identity
</a>
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/final-validation']" [routerLinkActiveOptions]="{exact: false}">
Final Validation
</a>
<a routerLinkActive="active" [routerLink]="['/customer-dashboard/customer-information/approval']" [routerLinkActiveOptions]="{exact: false}">
Approval
</a>
</div>

working CodesandBox
app.component.html
<div>
<span class="state-container" [ngStyle]="state === 1 && {'color': 'red'}"
>state 1</span
>
<span class="state-container" [ngStyle]="state === 2 && {'color': 'red'}"
>state 2</span
>
<span class="state-container" [ngStyle]="state === 3 && {'color': 'red'}"
>state 3</span
>
</div>
<div *ngIf="state === 1">
<form #f1="ngForm" (ngSubmit)="onSubmit(user)" novalidate>
<label for="name">Name</label>
<input name="name" id="name" [(ngModel)]="user.name" />
<label for="family">Family</label>
<input name="family" id="family" [(ngModel)]="user.family" />
<button (click)="next(user)">Next</button>
</form>
</div>
<div *ngIf="state === 2">
<form #f2="ngForm" (ngSubmit)="onSubmit(user)" novalidate>
<label for="address">Address</label>
<input name="address" id="family" [(ngModel)]="user.address" />
<button (click)="back()">Back</button>
<button (click)="next(user)">Next</button>
</form>
</div>
<div *ngIf="state === 3">
<p>The End</p>
<button (click)="back()">Back</button>
<button (click)="reset()">Reset</button>
<button (click)="save(user)">Save</button>
</div>
app.component.ts
import { Component, OnInit } from "#angular/core";
interface User {
name: string;
family: string;
address: string;
}
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title = "CodeSandbox";
state = 1;
user: User;
ngOnInit() {
this.user = {
name: "",
family: "",
address: ""
};
}
save(user: User) {
alert("Final Result:\n\n" + JSON.stringify(user));
}
next(user: User) {
++this.state;
alert(JSON.stringify(user));
}
back() {
--this.state;
}
reset() {
this.state = 1;
this.user = {
name: "",
family: "",
address: ""
};
}
}
app.module.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
import { FormsModule } from "#angular/forms";
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
I personally don't recommend this approach. Just remember, If you don't save the data and refresh the page your data is gone.

How do i rebind the javascript to elements in angular2 component?

I have defined some custom scripts in javascript file for my angular2 application. When i navigate to other component and come back to previous one, the scripts are not being binded to the html elements since the js file is not loaded the second time. How can i rebind the scripts to the html elements of a component in angular2? Or reload the js file needed by the component every time i navigate to that component?
Updated with Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app></my-app>
</body>
</html>
myjs.js
$(document).ready(function() {
$('#btnNext').click(function(){
$('#myModal').modal('show');
});
});
vendor.ts
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '../public/css/bootstrap.css';
import '../public/css/style.css';
import '../public/js/bootstrap.js';
import '../public/js/myjs.js';
modal.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'my-modal',
template: `
<button type="button" id="btnNext" class="btn btn-primary btn-lg">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button class="btn btn-secondary btn-lg" (click)="goToNextView()">Go to next view </button>
`
})
export class ModalComponent {
constructor(
private router: Router
){}
goToNextView(){
this.router.navigate(['/next']);
}
}
next-view.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'my-view',
template: `
<b>Hello this is my next route.</b>
<button class="btn-secondary btn-lg" (click)="goToModal()">Go Back</button>
`
})
export class NextViewComponent {
constructor(
private router: Router
){}
goToModal(){
this.router.navigate(['/']);
}
}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ModalComponent } from './modal.component'
import { NextViewComponent } from './next-view.component';
const routes: Routes = [
{
path:'',
redirectTo: '/',
pathMatch: 'full'
},
{
path:'',
component: ModalComponent
},
{
path: 'next',
component: NextViewComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModalComponent } from './modal.component';
import { NextViewComponent } from './next-view.component';
#NgModule({
imports: [
BrowserModule,
CommonModule,
AppRoutingModule
],
declarations: [
AppComponent,
ModalComponent,
NextViewComponent
],
bootstrap: [AppComponent]
})
export class AppModule{}
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {}
Initially my app looks like this :
when i click the Launch demo modal:
when i navigate to 'next' route:
when i click 'Go Back' and come to the initial page then my modal wont open. I did a lot of research on that and found that the js i have include is not binded to the element of the component when i navigate back to that component.
SO HOW CAN I REBIND MY JS TO THE ELEMENTS? If it is not how we do things in angular2 then please guide me to how to do it correctly.

It seems that i can include the trigger script in the ngAfterViewInit() to get it working.
Here is how i did it:
modal.component.ts
import { Component, AfterViewInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'my-modal',
template: `
<button type="button" id="btnNext" class="btn btn-primary btn-lg">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button class="btn btn-secondary btn-lg" (click)="goToNextView()">Go to next view </button>
`
})
export class ModalComponent implements AfterViewInit{
constructor(
private router: Router
){}
goToNextView(){
this.router.navigate(['/next']);
}
ngAfterViewInit(){
$('#btnNext').click(function(){
$('#myModal').modal('show');
});
}
}
Remember that typescript will show the error for $ and modal. But it will work. The error will only be shown in console. But if you don't want to see any error in the console also, then just install typings for bootstrap and jquery
npm install #types/jquery --save-dev
and
npm install #types/bootstrap --save-dev
and you will have to import jquery in vendor.ts as:
import * as $ from 'jquery';
and that is it. No error and working scripts.
It is recommended not to use JQUERY in angular2 application. You can use
ng2-bootstrap or ng-bootstrap
I only did it due to time constraint of the project.

Angular 2 Routing Refresh

I am trying to Implement Hashlocation Strategy out here it is not working please guide me.
This is My Angular & Router Version
Package.json
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"bootstrap": "^3.3.6",
Main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
app.routes.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
const appRoutes: Routes = [
{ path: 'users', component: UserListComponent },
{ path: 'schedules', component: ScheduleListComponent },
{ path: 'schedules/:id/edit', component: ScheduleEditComponent },
{ path: '', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });
app.modules.ts
import './rxjs-operators';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { LocationStrategy,HashLocationStrategy } from '#angular/common';
import { PaginationModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Routes, RouterModule } from '#angular/router';
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ProgressbarModule } from 'ng2-bootstrap/ng2-bootstrap';
import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-loading-bar';
import { TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent } from './app.component';
import { DateFormatPipe } from './shared/pipes/date-format.pipe';
import { HighlightDirective } from './shared/directives/highlight.directive';
import { HomeComponent } from './home/home.component';
import { MobileHideDirective } from './shared/directives/mobile-hide.directive';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { UserCardComponent } from './users/user-card.component';
import { UserListComponent } from './users/user-list.component';
import { routing } from './app.routes';
import { DataService } from './shared/services/data.service';
import { ConfigService } from './shared/utils/config.service';
import { ItemsService } from './shared/utils/items.service';
import { MappingService } from './shared/utils/mapping.service';
import { NotificationService } from './shared/utils/notification.service';
import { enableProdMode } from '#angular/core';
enableProdMode();
#NgModule({
imports: [
BrowserModule,
DatepickerModule,
FormsModule,
HttpModule,
Ng2BootstrapModule,
ModalModule,
ProgressbarModule,
PaginationModule,
routing,
TimepickerModule
],
declarations: [
AppComponent,
DateFormatPipe,
HighlightDirective,
HomeComponent,
MobileHideDirective,
ScheduleEditComponent,
ScheduleListComponent,
SlimLoadingBarComponent,
UserCardComponent,
UserListComponent
],
providers: [
ConfigService,
DataService,
ItemsService,
MappingService,
NotificationService,
SlimLoadingBarService,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit, ViewContainerRef } from '#angular/core';
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
#Component({
selector: 'scheduler',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
constructor(private viewContainerRef: ViewContainerRef) {
// You need this small hack in order to catch application root view container ref
this.viewContainerRef = viewContainerRef;
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8" />
<title>Scheduler</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="bower_components/alertify.js/themes/alertify.core.css" rel="stylesheet" />
<link href="bower_components/alertify.js/themes/alertify.bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="../assets/css/styles.css" />
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/alertify.js/lib/alertify.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<scheduler>
<div class="loader"></div>
</scheduler>
</body>
</html>
app.component.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ng2-slim-loading-bar></ng2-slim-loading-bar>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/']">
<i class="fa fa-home fa-3x" aria-hidden="true"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="menuitem" *ngFor="let menuItem of MenuItemss" [value]="menuItem">
{{menuItem.module}}
{{menuItem.module}} <span class="caret"></span>
<ul class="dropdown-menu" *ngIf="menuItem.menus">
<li *ngFor="let submenu of menuItem.menus" [value]="submenu">
{{submenu.description}}
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a [routerLink]="['/schedules']"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<a [routerLink]="['/customers']"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<a [routerLink]="['/customermaintenance']"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<a [routerLink]="['/users']"><i class="fa fa-users fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<i class="fa fa-info fa-3x" aria-hidden="true"></i>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="" target="_blank">
<i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="" target="_blank">
<i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="" target="_blank">
<i class="fa fa-github fa-3x" aria-hidden="true"></i>
</a>
</li>
<li>
<a target="_blank">
<i class="fa fa-rss-square fa-3x" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<br/>
<!-- Page Content -->
<div class="container">
<router-outlet></router-outlet>
</div>
<footer class="navbar navbar-fixed-bottom">
<div class="text-center">
<h4 class="white">
<a target="_blank">chsakell's Blog</a>
<i>Anything around ASP.NET MVC,Web API, WCF, Entity Framework & Angular</i>
</h4>
</div>
</footer>
You all know in angular 2 SPA when we refresh we get resource not found or 404 error to avoid i though of implementing the hashlocationstrategy but i am not successfull
kindly share your thoughts and guide me guys.
Thanks for all.

You only need to change on app.routes.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
const appRoutes: Routes = [
{ path: 'users', component: UserListComponent },
{ path: 'schedules', component: ScheduleListComponent },
{ path: 'schedules/:id/edit', component: ScheduleEditComponent },
{ path: '', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {
useHash: true });
**Replace above code with below code**
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'users', pathMatch: 'full' },
{ path: 'users', component: UserListComponent },
{ path: 'schedules', component: ScheduleListComponent },
{ path: 'schedules/:id/edit', component: ScheduleEditComponent },
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);