Hi everybody,
I am dependent on angular and I would simply like to create a multi step
navigation between my three components that I created.
By clicking on the "continue" button, I have to go to the next component by
ticking the corresponding checkbox on the same page you saw the idea ?? !!
I did some testing without real success. And most importantly I do not want
to use a framework. But I'm having trouble.
Can you help me sort out my code, see the change to make it work.
Thank you for your help
*Html*:
<nav>
<ul class="navbar-nav">
<li class="nav-item active">
<a routerLink="/configure" routerLinkActive="active" >CONFIGURE</a></li>
<li class="nav-item active"> <a routerLink="/assets" routerLinkActive=
"active">ASSETS</a> </li>
<li class="nav-item active"> <a routerLink="/synthese" routerLinkActive=
"active">SYNTHESE</a> </li>
</ul>
<button (click)="goNext()">Suivant</button>
<button (click)="goBack()">précédent</button> </nav>
Et le Typescript :
import { Component, OnInit, ViewChild } from '@angular/core';
import { $ } from 'protractor';
import { Router } from '@angular/router';
import { FormControl, Validators, FormsModule } from '@angular/forms';
import { Location } from '@angular/common';
import { ConfigureComponent } from
'../micro-grid-management/drag-and-drop/configure/configure.component';
import { DragAndDropComponent } from
'../micro-grid-management/drag-and-drop/drag-and-drop.component';
import { GridAssetsComponent } from
'../micro-grid-management/grid-assets/grid-assets.component';
import { GridSyntheseComponent } from
'../micro-grid-management/grid-synthese/grid-synthese.component';
@Component({ selector: 'app-navbar', templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css'] })
export class NavbarComponent implements OnInit {
states = [ {id: 1 + '/configure'}, {id: 2 + '/assets'}, {id: 3 + '/synthese'
} ];
index = 1;
constructor(private router: Router, private location: Location) { }
ngOnInit() { }
goBack(): void { this.location.back();
if(this.index <= this.states.length) return; this.goToStep(this.index - 1);
}
goNext(): void {
if(this.index >= this.states.length) return; this.goToStep(this.index + 1);
this.location.forward(); }
goToStep(newStep) { this.index = newStep; console.log('new active step' +
this.index); } }
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
