Step navigation with Angular 6

I need your help because I created a navigation step but I do not know how to use it. I use viewchild but it is unsuccessful for me. I also tried to create a function with an index++. There are three components to display on the same page. I don't know to do. I try different things with no result. But impossible to find something I want.

Watch the image below

Step nav image:

export class NavbarComponent implements OnInit null = null;
show: boolean = true;

@ViewChild('state')
primaryBlock: TemplateRef<GridStateComponent>

<section class="main__container--step">
<!-- Header & Switch -->
<header class="mg--lg">
<div class="flex flex--jcsb flex--aic">
<h2 class="title title--sm title--grey title--uppercase">Configure Grid</h2>
<form class="switchToggle flex flex--jcsb flex--aic">
<label class="flex flex--aic" for="configure" #configure>
<input type="radio" name="switchtoggle" id="configure" value="configure">
<span><a routerLink="configure" routerLinkActive="active" ></a>Configure</span>
</label>
<label class="flex flex--aic" for="grid" #state>
<input type="radio" name="switchtoggle" id="grid" value="grid" checked="checked">
<span><a routerLink="state" routerLinkActive="active" ></a>Grid State</span>
</label>
<label class="flex flex--aic" for="synthesis" #synthese>
<input type="radio" name="switchtoggle" id="synthesis" value="synthesis">
<span><a routerLink="synthese" routerLinkActive="active" ></a>Synthesis</span>
</label>
</form>
<button class="button__step" (click)="continue()" ><a href="#">Continue</a></button>
</div>
</header>
<!-- End Header & Switch -->
<!-- End Main Content -->
</section>

2 Answers
2

If you need actual routing for these steps, you may use <router-outlet></router-outlet> under the buttons;

<router-outlet></router-outlet>

lets say our html is kinda like that:

<div>
<button [routerLink]="['', 'step-1']">Step 1</button>
<button [routerLink]="['', 'step-2']">Step 2</button>
<button [routerLink]="['', 'step-3']">Step 1</button>
</div>
<router-outlet></router-outlet>


then your routing file should be quite similar to this:

const routes: Routes = [

path: '',
component: StepParentComponent,
children: [
path: 'step-1', component: StepOneComponent ,
path: 'step-2', component: StepTwoComponent ,
path: 'step-3', component: StepThreeComponent ,
]

];


and then use them inside your routing declaration inside your module(app or other, in case if that's not root module - use .forChild(routes)):

.forChild(routes)

RouterModule.forRoot(routes)


I would recommend you to use the tabs of Angular materials but you can also make something like this with *ngIf:

<mat-tab-group>
<mat-tab label="Configure">
<ConfigureComponent></ConfigureComponent>
</mat-tab>
<mat-tab label="Grid State">
<GridStateComponent></GridStateComponent>
</mat-tab>
<mat-tab label="Synthesis">
<SynthesisComponent></SynthesisComponent>
</mat-tab>
</mat-tab-group>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.