0

I have a nav-bar that uses a switch bar (similar to a toggle button) that is default to "All Cats in the Family". When the switch is off, it shows the default "All Cats in the Family" label next to it and displays a table of all the cats in the family. This works fine and the backend/data is working as expected.

However, when the switch is on (aka clicked), I want the switch bar label to read "My Cats" and show the table that shows only my cats. I don't really understand how to get the value of the boolean value of "allCatsTable" because that value is set in the navBar. Can someone help a beginner learn how to do this?

I omitted some code to make my question clearer.

cats.component.ts

export class CatComponent implements OnInit {
  
  tableName: string;
  gridPage: string;

  constructor(private router:Router, public tableRefineHelper: tableRefineHelper) {
    if (isAllCatsTable) {.  <--- how do I get this value from the navBar?
       this.tableName = workloadName.allCats;
       this.gridPage = 'allCats'
    } else {
       this.gridPage = 'myCats';
       this.workloadName = workloadName.myCats;
    }
  }

  ngOnInit(): void {
  }

}

actionbar.component.html

<div class="actionbar">
  <div *ngIf="isAllCatsTable || isMyCatsTable">
    <igx-switch labelPosition="after" (change) = "onSwitchClick($event)"
                checked="false">{{switchName}}</igx-switch>
  </div>
</div>

actionbar.component.ts

export class ActionbarComponent implements OnInit, OnChanges {

  isAllCatsTable: boolean;
  isMyCatsTable: boolean;
  switchName: string = "All Cats in the Family";

  constructor() { }

  public onSwitchClick(event) {
    if (event.checked) {
      this.switchName = "All Cats in the Family";
    } else {
      this.switchName = "My Cats";
    }
  }
Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
compscihelp
  • 1

1 Answers1

1

For this kind of cross-component communication, you can use an @Input() on the CatComponent, if the component is a direct child of the ActionbarComponent and the action bar can set the input value. If not, then you will need a service which will notify the CatComponent whenever a change happens in the ActionbarComponent. You will have to inject the service in both components, and when action bar component switch value changes, it notifies the service, which then notifies all of its subscribers.

Here's more documentation on the topic

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100