Angular 8 property does not exist on the type AppComponent

Question

I have created a small application using Angular 8 its just a app with 2 selector. But its throwing Property 'DepScreen' does not exist on type 'AppComponent' error while compiling.

Please find the error in detail below.

ERROR in src/app/app.component.html:10:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'.

10         (click) = "DepScreen=true; EmpScreen=false;">
                      ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
src/app/app.component.html:10:36 - error TS2339: Property 'EmpScreen' does not exist on type 'AppComponent'.

10         (click) = "DepScreen=true; EmpScreen=false;">
                                      ~~~~~~~~~
                                  

Please find index.html code below

  <nav class="navbar navbar-expand-sm bg-light navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "DepScreen"
        (click) = "DepScreen=true; EmpScreen=false;">
        Departments
      </button>
      </li>
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "EmpScreen"
        (click) = "DepScreen=false; EmpScreen=true;">
        Employees
      </button>
      </li>
    </ul>
  </nav>

  <app-department *ngIf="DepScreen"></app-department>
  <app-employee *ngIf="EmpScreen"></app-employee>

Please find my app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

Answer 1

Index.html

  <nav class="navbar navbar-expand-sm bg-light navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "DepScreen"
        (click) = "onScreenSelect()">
        Departments
      </button>
      </li>
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "EmpScreen"
        (click) = "onScreenSelect()">
        Employees
      </button>
      </li>
    </ul>
  </nav>

Now, in your app.component.ts

export class AppComponent {
  title = 'Hello World';
  DepScreen = true;  // put the default values 
  EmpScreen = false;

  onScreenSelect(){
     this.DepScreen = !this.DepScreen; // at any point in time only one screen is visible
     this.EmpScreen = !this.EmpScreen;
  }

}

Answer 2

index.html

<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
  <li class="nav-item">
    <button class="m-1 btn btn-light btn-outline-primary" Button
    label = "DepScreen"
    (click) = "onSelect(active=1)">
    Departments
  </button>
  </li>
  <li class="nav-item">
    <button class="m-1 btn btn-light btn-outline-primary" Button
    label = "EmpScreen"
    (click) = "onSelect(active=2)">
    Employees
  </button>
  </li>
</ul>

app.component.ts

export class AppComponent {
title = ''Hello World';
DepScreen = false;  // currently not visible
EmpScreen = false;  // currently not visible
active = 0

onSelect(active){
  if(active == 1){
    this.DepScreen = true; // department screen visible
    this.EmpScreen = false;
  }else if(active == 2){
    this.DepScreen = false; 
    this.EmpScreen = true;  // employee screen visible
  }else{
    this.DepScreen = false; 
    this.EmpScreen = false; 
  }
 }
}