What is the best approach to hide/show component depending on some condition in Angular 8

Question

Guys thank you for your help. After getting lots of suggestions and mixed and matched all those suggested code I am able to solve the earlier issue. However I am getting the below error after using @ViewChild decorators in console.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'count1'. Current value: 'count2'.

My Parent ts file code is following

import { Component, OnInit, Input, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';
import { CensusComponent } from '../your-data/census/census.component';
import { ApplicationComponent } from '../your-data/application/application.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements AfterViewInit{
  @Input() step;

  count:string = 'count1';
  constructor() {

  }
  @ViewChild(CensusComponent, {static: false}) census: CensusComponent;
  ngAfterViewInit() {
    this.count = this.census.getSection(); 
  }      
}

And the your-data.component.html code is following

<div [ngSwitch]="count">
   <app-census *ngSwitchCase="'count1'"></app-census>
   <app-application *ngSwitchCase="'count2'"></app-application>
</div>

Does this answer your question? [Angular 2 Show and Hide an element](https://stackoverflow.com/questions/35163009/angular-2-show-and-hide-an-element) — miselking, Feb 26 '20 at 08:57

score 1 · Answer 1 · edited Mar 02 '20 at 09:27

Just use ngIf and in condition use count which will be incremented on click of next button

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <app-census *ngIf="count === 1"></app-census>
      <app-census1 *ngIf="count === 2"></app-census1>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Feb 26 '20 at 08:59

0

Use *ngIf to show components based on steps, try:

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <app-census *ngIf="step == 1"></app-census>
      <app-census1 *ngIf="step == 2"></app-census1>
    </div>
  </div>
</div>

answered Feb 26 '20 at 08:59

Mustahsan

3,852
1
18
34

Getting the below Can't bind to 'ngif' since it isn't a known property of 'app-census'. *ngIf only accept Boolean value. Here I need to check a condition. – Feb 26 '20 at 09:08
@PiyaliGhosh You need to add [CommonModule](https://angular.io/api/common/CommonModule) in your app.module or the module that you declare your component. – Karmidzhanov Feb 26 '20 at 09:38

Supamiu · Answer 3 · 2020-02-26T11:41:03.100

0

You can use *ngSwitch and *ngSwitchCase for a cleaner approach when you have more than two steps:

<div class='container'>
  <div class='row'>
    <div class='setup-content'>
      <h1>Confirm Data/Answer Questions</h1>
      <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
      <ng-container [ngSwitch]="count">
          <app-census *ngSwitchCase="1"></app-census>
          <app-census1 *ngSwitchCase="2"></app-census1>
      </ng-container>
    </div>
  </div>
</div>

edited Feb 26 '20 at 11:41

answered Feb 26 '20 at 08:59

Supamiu

8,501
7
42
76

I am getting below error src/app/your-data/your-data.component.html:7:36 - error TS2551: Property 'count1' does not exist on type 'YourDataComponent'. Did you mean 'count'? 7 ~~~~~~ – Feb 26 '20 at 09:15
You have to set it to *ngSwitchCase="1", not *ngSwitchcase="count1". – Supamiu Feb 26 '20 at 11:40
This problem has been solved. However another problem has occurred. I am getting below error after using ViewChild and updating my DOM accordingly. core.js:5845 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'count1'. Current value: 'count2'. – Feb 27 '20 at 04:44
@PiyaliGhosh This is because you're updating the count value in a lifaecycle hook, ngOnInit, ngOnChanges, etc. – Supamiu Feb 27 '20 at 11:03

ruth · Answer 4 · 2020-02-26T10:45:49.857

You could either use *ngIf or *ngSwitchCase directive to show components based on a condition.

Template:

<div [ngSwitch]="step">
  <div *ngSwitchCase="'step1'"><app-census1></app-census1></div>
  <div *ngSwitchCase="'step2'"><app-census2></app-census2></div>
  <div *ngSwitchCase="'step3'"><app-census3></app-census3></div>
  <div *ngSwitchCase="'step4'"><app-census4></app-census4></div>
  <div *ngSwitchDefault>Default</div>
</div>

Component

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements OnInit {
  @Input() step;
  count:number;
  step: string;

  constructor() { }

  ngOnInit() {
    // here set this.step = 'step1' | 'step2' | 'step3' | 'step4'      
  }
}

For stepper based applications, you could refer here for a sample application. Enabling the linear mode in that application will make sure you need to enter some data before you can proceed to the next step.

Getting the below error src/app/your-data/your-data.component.ts:18:29 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. 18 this.count = 'count1' | 'count2' | 'count3' | 'count4' — , Feb 26 '20 at 09:28
You need to set the value of `this.step` based on which step you are. For eg., if you are in Step 1, then set `this.step = 'step1';`. This will show the component ``. Then when you go to Step 2, set `this.step = 'step2';`. This will show `` and so on. `this.step = 'step1' | 'step2' | 'step3' | 'step4'` is supposed to be a placeholder to tell you what values `this.step` can take. — ruth, Feb 26 '20 at 10:43
Also `this.count = 'count1' | 'count2' | 'count3' | 'count4' ` is from the other answer. I use variable `this.step`. — ruth, Feb 26 '20 at 10:46

sunil · Answer 5 · 2020-02-26T11:51:35.010

you can use *ngTemplateOutlet to display component based on count variable.

 <div class='container'>
          <div class='row'>
            <div class='setup-content'>
              <h1>Confirm Data/Answer Questions</h1>
              <p>Please answer all questions below. If you have questions about the data provided on this screen, please contact << Broker >> at << Phone >> or << Email >>.</p>
           <div *ngif="count == 1"> 
 <app-census></app-census>
<ng-container *ngTemplateOutlet="template"></ng-container>
           </div>
         <div *ngif="count == 2"> 
 <app-census1></app-census1>
<ng-container *ngTemplateOutlet="template"></ng-container>
           </div>
            </div>
          </div>
        </div>

    <ng-template #template>
      <router-outlet>
      </router-outlet>
    </ng-template>

score 0 · Accepted Answer · answered Feb 27 '20 at 08:51

The above issue has been resolved to change mode from dev to prod. in main.ts

enableProdMode();

Please remove the if condition. Below is my whole solve code

Parent Component .html file

<div [ngSwitch]=count>
      <app-census *ngSwitchCase="'count1'"></app-census>
      <app-application *ngSwitchCase="'count2'"></app-application>
   </div>

Parent Component file

import { Component, OnInit, Input, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { NagivationComponent } from '../nagivation/nagivation.component';
import { CensusComponent } from '../your-data/census/census.component';
import { ApplicationComponent } from '../your-data/application/application.component';

@Component({
  selector: 'app-your-data',
  templateUrl: './your-data.component.html',
  styleUrls: ['./your-data.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourDataComponent implements AfterViewInit{
  @Input() step;

  count:string = 'count1';
  constructor() {

  }
  @ViewChild(CensusComponent, {static: false}) census: CensusComponent;
  ngAfterViewInit() {
    this.count = this.census.getSection(); 
  }

}

Child component html

<button class="sub btn btn-primary btn-lg nbtn" type="button" (click)="getSection()"><span>NEXT</span></button>

Child component file

import { Component, OnInit, Input } from '@angular/core';
import { YourDataComponent } from '../your-data.component';
@Component({
  selector: 'app-census',
  templateUrl: './census.component.html',
  styleUrls: ['./census.component.css']
})
export class CensusComponent implements OnInit {
  @Input() count:string;
  getSection(){
    this.count = 'count2';
    return this.count;
  }
  constructor() {

  }

  ngOnInit(): void {
  }

}

What is the best approach to hide/show component depending on some condition in Angular 8

6 Answers6