CODEWITHSUNDEEP
cssangular
Jack Guy
Jack Guy

Reputation: 8523

Flexbox column with Angular 2

I'm trying to make a UI layout with 100% height using flexbox. The problem is, this is an Angular 2 app so elements are added in that I don't really have any control of.

Here's my demo. As you can see, inside each .tab div (which you can think of like a page) there is another div that is hidden programatically. When this inner div is hidden, I would like the parent div to be effectively hidden as well, allowing the visible .tab to take up the entire remaining height.

<div class="foo">
  <header>A</header>
  <main>B</main>
  <nav>
    <div class="tab">
      <div style="display: none;">Foo</div>
    </div>
    <div class="tab">
      <div>Bar (I want this at the top)</div>
    </div>
    <div class="tab">
      <div style="display: none;">Baz</div>
    </div>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
  </nav>
</div>

My HTML isn't really flexible because of the way Angular 2 components work. How can I achieve my desired behavior?

Upvotes: 0

Views: 355

Answers (1)

Vlado Tesanovic
Vlado Tesanovic

Reputation: 6424

Use directives as:

*ngIf, *ngClass, *ngStyle

To control style and visibility in DOM.

<div *ngIf="isActive === first" class="tab">
  <div style="display: none;">Foo</div>
</div>
<div *ngIf="isActive === second" class="tab">
  <div>Bar (I want this at the top)</div>
</div>
<div *ngIf="isActive === third" class="tab">
  <div style="display: none;">Baz</div>
</div>

Upvotes: 1

Related Questions