-1

I have some tabs in my template, when I load the website I see the content of the first tab, I want to display the contents only when I click the tabs, to do that what should I do?

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>
das
  • 1
  • 1

3 Answers3

2

Looking at your profile you ask a lot of similar questions. Please take time to go over some official docs and actually try before asking. Secondly if someone has provided you with an acceptable answer, it wouldn't hurt to mark it accepted. Otherwise you may be wasting other people's time offering answers when actually you've already made up your mind.

Regardless... What you're asking is the default behaviour of tabs. Content of the tab is shown when clicked on the tab. What you want is to not automatically select first tab (perhaps?). That feature is not provided out-of-the-box. Design of the Material tabs is meant so that at least one tab is always selected.

Here are some ideas for a workaround though https://stackoverflow.com/a/53818913/15439733 or use conditional statemanets using *ngIf to either render contents or not.

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • @Joosep Parts In fact, I ask several similar questions with one account to solve a problem, and then I create a new account and raise the next problem. – das Jun 30 '22 at 07:21
  • @das I meant no offence, really. Just put little bit more effort into a question, showcase what you've tried and discuss why you can't overcome a problem rather than just writing "I want this, please do it for me". SO isn't a place to do your (home)work for you. – Joosep Parts Jun 30 '22 at 07:38
  • Yes, but I feel that if I ask a short or long question, it is my homework in both cases. – das Jun 30 '22 at 07:45
0

I think, the best way to do this is hide first tab by SCSS and remove content from this tab.

For example, you can hide first element by something like this (you should specify selector)

// styles.scss - your global files
.mat-tab-label:first-of-type {
  display: none;
}

Please check this DEMO STACKBLITZ

Kordrad
  • 1,154
  • 7
  • 18
0

Try this working in Ruby on Rails. See this image

    <ul class="nav nav-pills">
    <%- idx = 0 -%>
    <li class="<%= 'active' if idx == 0 -%>">
      <a href="#" data-toggle="tab" data-target="#response" data-slide-to="<%= idx -%>">
       Content 1
      </a>
    </li>
    <%-
      active_tab ||= 0
      idx += 1
    -%>

    <li class="<%= 'active' if idx == 0 -%>">
      <a href="#" data-toggle="tab" data-target="#response" data-slide-to="<%= idx -%>">
        Content 2
      </a>
    </li>
    <%-
      active_tab ||= 1
      idx += 1
    -%>

    <li class="<%= 'active' if idx == 0 -%>">
      <a href="#" data-toggle="tab" data-target="#response" data-slide-to="<%= idx -%>">
        Content 3
      </a>
    </li>
    <%- active_tab ||= 2 -%>
    </ul>

    <div id="response" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
      <div class="item <%= 'active' if active_tab == 0 -%>">
        <p>
         Hello Content 1
        </p>
      </div>

     <div class="item <%= 'active' if active_tab == 1 -%>">
        <p>
          Hello Content 2
        </p>
      </div>

      <div class="item <%= 'active' if active_tab == 2 -%>">
        <p>
          Hello Content 3
        </p>
      </div>
    </div>
    </div>
VENKATESH KARNI
  • 56
  • 6