title: Angular 9 multi step form / form wizard
body: <p>I am trying to create a simple multi-step form (Step 1, 2 3). I am using *ngIf to hide and show the Steps.
  Here is what I tried.</p>
  <p>This is my component.html</p>
  <pre><code>&lt;div *ngIf=&quot;step1&quot; class=&quot;step1&quot;&gt;
  &lt;h1&gt;STEP 1&lt;h1&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf=&quot;step2&quot; class=&quot;step2&quot;&gt;
  &lt;h1&gt;STEP 2&lt;h1&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf=&quot;step3&quot; class=&quot;step3&quot;&gt;
  &lt;h1&gt;STEP 3&lt;h1&gt;
  &lt;/div&gt;
  &lt;div class=&quot;button-container&quot;&gt;
  &lt;button class=&quot;float-left&quot; (click)=&quot;stepBackward()&quot; &gt;Back&lt;/button&gt;
  &lt;button class=&quot;float-right&quot; (click)=&quot;stepForward()&quot;&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is my component.ts</p>
  <pre><code>import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
  import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { Title } from '@angular/platform-browser';
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs';
  @Component({
    selector: 'app-step-builder',
    templateUrl: './step-builder.component.html',
    styleUrls: ['./step-builder.component.scss']
  })
  export class StepBuilderComponent implements OnInit {
  
   constructor(private pageTitle: Title,
      private router: Router,
      private fb: FormBuilder,
      private http: HttpClient,
      @Inject(ENV_TOKEN) private ENV: any,
      private renderer: Renderer2,
      private snackBarService: SnackbarService){}
      stepCounter = 0;
      step1 = true; step2 = false; step3 = false;
      stepArray = new Array();
  
     stepForward() {
  
      this.stepArray[this.stepCounter] = false;       
      console.log(this.stepCounter);
      this.stepCounter++;
      
      this.stepArray[this.stepCounter] = true;
      console.log(this.stepCounter);
    }
  
    stepBackward() {
      console.log(this.stepCounter);
      this.stepArray[this.stepCounter] = false;
     
      this.stepCounter--;
      console.log(this.stepCounter);
    }
  
  }
  </code></pre>
  <p>So basically what I am trying to do is, I have a <code>stepCounter</code> which is at 0 at the start, and when I click on Forward the counter increments, while also trying to hide the current container(step1) by setting the this.step1 to false, I used an array to store step1,step2 &amp; step3 and using stepCounter as the index, I a trying to set the value to false for the current step. However that doesn't hide the div, the value of step1 is false, but div is not hidden. This whole approach may sound silly. Is there a better and simple way achieve the functionality?</p>