CODEWITHSUNDEEP
javascriptangular
Suluuboi
Suluuboi

Reputation: 69

Expanding Card Grid With Flexbox Using angular 8

https://codepen.io/nailaahmad/pen/LGRxWJ,

I am looking to recreate the code pen above but I'm not sure where to start. A push in the right direction(ideas) would be highly appreciated, Thank you.


var $cell = $('.card');

//open and close card when clicked on card
$cell.find('.js-expander').click(function() {

  var $thisCell = $(this).closest('.card');

  if ($thisCell.hasClass('is-collapsed')) {
    $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
    $thisCell.removeClass('is-collapsed').addClass('is-expanded');

    if ($cell.not($thisCell).hasClass('is-inactive')) {
      //do nothing
    } else {
      $cell.not($thisCell).addClass('is-inactive');
    }

  } else {
    $thisCell.removeClass('is-expanded').addClass('is-collapsed');
    $cell.not($thisCell).removeClass('is-inactive');
  }
});

//close card when click on cross
$cell.find('.js-collapser').click(function() {

  var $thisCell = $(this).closest('.card');

  $thisCell.removeClass('is-expanded').addClass('is-collapsed');
  $cell.not($thisCell).removeClass('is-inactive');

});

I would like to convert this java script into typescript

Upvotes: 0

Views: 467

Answers (2)

Suluuboi
Suluuboi

Reputation: 69

With help from wandrille answer above, I left the css as is and just edited the Html using [className] ditective that allows me to use conditional operator hence changing the css based on my selection.

<div class="cards">

 <div [className]="activeCardIndex === i ? 'card is-expanded' : ' card is-collapsed'"  *ngFor="let card of cards; let i = index">
  <div class="card__inner [ js-expander ]" (click)="activeCardIndex = i">
   <span>Card</span>
   <i class="fa fa-folder-o"></i>
  </div>
  <div  class="card__expander" >   <!--[class.active]="activeCardIndex === i"-->
   <i class="fa fa-close [ js-collapser ]" (click)="activeCardIndex=null"></i>
                    Expander
  </div>
 </div>

</div>

Upvotes: 0

Wandrille
Wandrille

Reputation: 6801

You will define the structure as the code suggests : 

<card-container *ngFor="let card of cards; let i = index">
   <card (click)="activeCardIndex = i"></card>
   <detail [class.active]="activeCardIndex === i" (click)="i=null"></detail>
</card-container>

And for the css, copy what they are doing.

When detail is active, then height : auto, else height:0

Upvotes: 2

Related Questions