Angular - how to use one function to manage multiple toggles / click events?

Question

Please see attached image.

So, this is a navbar, where clicking on any of the tabs, the content below the nav will change based on which tab is selected.

Here is code for an example of how the function works for when click event is handled when Bespoke Manufacturing is clicked:

 toggleBespoke() {
   this.showBespoke = true;
   this.showHow = false;
   this.showCasting = false;
   this.showForging = false;
   this.showInjection = false;
   this.showPressing = false;
   this.showTurning = false;
 }

As you can see, it's simple, the about showAbout variable is set to true whilst all the others are manually set to false.

ngClass is used which gives the blue highlighted effect so only one of the tabs gets highlighted when selected as only one can be true whilst others are false.

The same logic is then applied to the 6 other tabs.

But this is my question, what is the way to prevent code duplication and handle such click events in one function only?

user_2352314 · Answer

You can use a property in your component which stores the active tab.

export class AlarmsComponent {
  activeTab = 'bespoke';
}

And then you can use it in your template like this:


  
    
      Bespoke manufacturing
    
  
  
    
      How it works
    
  



  Bespoke manufacturing tab content


  How it works tab content

user_5619193 · Answer

Another solution (dirtier than the previous one) is to create a single function executed on click passing the $event param.

For instance you have something like the following to manage the nav item:

BESPOKE MANUFACTURING

And inside the class you have onClick function as the following:

onClick(ev){
 let clickedId = ev.target.id;
 //clickedId is the id of the clicked element and you can add class accordingly
 if(clickedId === 'bespoke'){
  //the user clicked the bespoke item 
 }
}

user_4045916 · Answer

Create a variable to store the current active tab, in interaction with tab set current clicked tab to activeTab, then apply active inactive class using this variable ,for example in

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  activeTab: string = 'tab1';

  isActive(tabName){
    return this.activeTab === tabName;
  }

  makeActive(tab){
    this.activeTab = tab;
  }
}

in Html

app.component.html


  
    Tab 1
  
  
    Tab 2
  
  
    Tab 3
  
  
    Tab 4
  



  
     tab 1 content
  
   
     tab 2 content
  
   
     tab 3 content
  
   
     tab 4 content

here is the running sample https://stackblitz.com/edit/angular-bootstrap-4-starter-cbrzm5

user_3933927 · Answer

I'd go with the framework and actually use proper routing instead of hiding content by hand.

as a bonus, you'll get the current tab get set to automatically when the user refresh the page.

Angular - how to use one function to manage multiple toggles / click events?

4 Answers