Angular : Ouput of ComponentA as Input for ComponentB

Question

I am new at Angular so in order to learn it I always create a small project. In this case I have 3 components of which only these two are important for now:

TANavBarComponent
TAPageContainerComponent

In my TANavBarComponent I want to 'Output' the selected Tab and use that value as 'Input' in TAPageContainerComponent. Based on the input received I will 'fill' the container with the 3rd component.

My code for TANavBarComponent:

export class TANavBarComponent {
  @Output() pageToDisplay = new EventEmitter();

  tabClick(pageName: string){
    switch(pageName){
      case '1':
        alert(pageName);
        this.pageToDisplay.emit(pageName);
        break;
      case '2':
        alert(pageName);
        this.pageToDisplay.emit(pageName);
        break;
    }
  }
}

My code for TAPageContainerComponent:

export class TAPageContainerComponent {
  title: string = "TAPageContainerComponent";
  @Input() pageToDisplay!: string;    
}

<div [ngSwitch]={pageToDisplay} class="ta-page-container" >
    <div *ngSwitchCase="'1'"><clone-user-settings></clone-user-settings></div>
    <div *ngSwitchCase="'2'"><transfer-deal></transfer-deal></div>
</div>

How do I get the 'Output' as 'Input' in order to perform the NgSwich?

santamanno · Accepted Answer · 2023-01-16 05:03:56Z

2

When you emit the Output of TANavBarComponent you can set it on an attribute

<app-tabNavBar (pageToDisplay)="onPass($event)"></app-tabNavBar>

{
   elementToPass: string = '';

   onPass(pageName: string){
   this.elementToPass = pageName
}

And that same property binding to a TAPageContainerComponent input

<app-taPageContainer [pageToDisplay]="elementToPass"></app-taPageContainer>

edited Jan 16, 2023 at 5:03

santamanno

6364 silver badges12 bronze badges

answered Jan 12, 2023 at 22:25

Fredy Lemus

843 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rico Strydom Over a year ago

This helped me in a direction - thanks. Now I am stuck with a scenario where once I select the tab, the page which should be displayed in the TAPageContainerComponent is displayed for a split second and then it disappears. Any idea what could cause this?

Rick Over a year ago

you are likely not thinking correctly in terms of how angular works. my suggestion would be to get everything to work how you want it to work using only your container component. and then once that is working. try creating the second component and move some of your code there.

Collectives™ on Stack Overflow

Angular : Ouput of ComponentA as Input for ComponentB

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related