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>

Answer 1

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 {
  }

}