CODEWITHSUNDEEP
angular
Manzer Hashmi
Manzer Hashmi

Reputation: 73

how to make custom navigation tabs in angular2?

Here, I want to create tabs using divTab and corresponding click on divTab shows and hide its content at the below of tabs.By default,the first divTab is active and its corresponding content below it are shown and others hidden. Likewise, on the click of each divTab their content should show below and others get hidden. How to show their corresponding content on the click of tabs below?

Note: The first divTab must have "active" backgroundColor and rest #777; while we click on the divTabs they become active.

I am new to angular2, so getting difficulty in angular2 way?

    app.component.ts
    --------------------
    tabsData = ['a', 'br', 'Sp', 'hh','ee'];

showmyContent(){
----                    //show my tab0Content,tab1content
}

        app.component.html
            --------------------------
            <div class="col-xs-12 rmpm tabsMenu" id="navBar">
                <div class="">
                    <div id="tab{{i}}" class="divTab" style="width:calc(100%/5);float:left;background:#777;" click="showmyContent()" *ngFor="let tab of tabsData;let i = index; let frst=first">
                        {{tab}}
                    </div>
                </div>
            </div>
    <div class="col-xs-12" id="tab0Content" style="display:block;">Tab0 Content</div>    
    <div class="col-xs-12" id="tab1Content" style="display:none;">Tab1 Content</div>
    <div class="col-xs-12" id="tab2Content" tyle="display:none;">Tab2 Content</div>
    <div class="col-xs-12" id="tab3Content" style="display:none;">Tab3 Content</div>
    <div class="col-xs-12" id="tab4Content" style="display:none;">Tab4 Content</div>

Upvotes: 0

Views: 678

Answers (2)

Swoox
Swoox

Reputation: 3740

Add an ngClass to your tabs. Change your tabsData:

tabsData = [{name: 'a', color: true}, {name: 'br', color: false}, {name: 'Sp', color: false}];

And in the html:

<div id="tab{{i}}" class="divTab" click="showmyContent(i)" *ngFor="let tab of tabsData;let i = index; [ngClass]="{'buttonColor': tab.color}">

In your css:

.buttonColor{ 
  background-color: red; // play here with styling
}

Then last if clicked: EDIT

private showmyContent(_index: any){
  tabsData[_index].color = true;
  content[_index].show = true;
}

And now ngIf in your HTML:

<div id="content{{i}}" class="content" *ngFor="let content of content">
   <div *ngIf="content.show"> {{content.text}} <div>

Upvotes: 0

jasper
jasper

Reputation: 355

You can always use an *ngIf to toggle elements on and off.

 [...]
<div *ngIf="currentTab == 0" class="col-xs-12" id="tab0Content" style="display:block;">Tab0 Content</div>    
<div *ngIf="currentTab == 1" class="col-xs-12" id="tab1Content" style="display:none;">Tab1 Content</div>
[...]

And then you basically change that value currentTab in your corresponding component on clicking yout "tab".

There might be more sophisticated solutions but for a beginner this will certainly do the job.

Upvotes: 1

Related Questions