Create multi step angular 6 without material

[SARRE Thierno]

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); } }

[Zlatko Đurić]

Not sure exactly what you're aiming at - multi-step forms?

Here's a pretty basic example (with dynamic steps as a bonus): https://stackblitz.com/edit/angular-multi-step-forms?file=src/app/app.component.ts

Not very sophisticated, but it shows the basic steps, dynamic routes, static routes, such things.

Some notes:

- have a router-outlet for the content. That way you can navigate between those.

- track where you are, from parent component (have something flexible, not route snapshots like my example). That'S your state management.

- that nested component does not have to be a single component - check the router config, make this several routes for different steps and components.

- post your exact problem, error messages, code sample if you'd like more specific help, ok?

Zlatko