CODEWITHSUNDEEP
htmlangulartypescriptangular-material
Michael
Michael

Reputation: 297

How do I swap between Material Cards, which are created by one component?

I'm trying to swap between material cards by button click. How do I implement that?

Following a little bit of code and screenshots:

miner-view.component.html: This component should hold all 10 cards

<button mat-raised-button (click)="precedingBlock()"><</button>
<button mat-raised-button (click)="nextBlock()">></button>
<div class="blocksWrapper">
  <app-miner-card></app-miner-card>
</div>

miner-view.component.ts: At the moment I create 10 cards. By clicking on one of these 2 buttons I call precedingBlock(), which should display the previous block, and the other button should call nextBlock(), which should display the next block.

export class MinerViewComponent implements OnInit {
  minerCounter = 1;

  addCard(miner: number, blockHash: string, blockNumber: number, transactions: Transaction[],
          previousBlock: string): Block {
  }

  constructor(private emitTransactionService: EmitTransactionService) { }

  ngOnInit() {
    this.blocks = [];
    for (let i = 0; i < 10; i++) {
      this.blocks[i] = this.addCard(this.miner = i + 1, this.blockHash = '00000000000000000000000000000000', this.blockNumber = 0,
        this.transactions = undefined, this.previousBlock = '');
      this.emitTransactionService.emitMiner(i + 1);
    }
  }

  precedingBlock() {
    this.minerCounter--;
    this.blocks[this.minerCounter];
  }

  nextBlock() {
    this.minerCounter++;
    this.blocks[this.minerCounter];
  }

}

That's what I tried at the moment, but there is something I'm missing in the html and ts.

This is what it looks like: If I click on < it should show "Block of Miner 9".

enter image description here

Upvotes: 1

Views: 443

Answers (2)

Michael
Michael

Reputation: 297

I just solved that with ngSwitch:

<button mat-raised-button (click)="precedingBlock()"><</button>
<button mat-raised-button (click)="nextBlock()">></button>
<div class="blocksWrapper" [ngSwitch]="minerCounter">
  <app-miner-card *ngSwitchCase="1">{{blocks[0]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="2">{{blocks[1]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="3">{{blocks[2]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="4">{{blocks[3]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="5">{{blocks[4]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="6">{{blocks[5]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="7">{{blocks[6]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="8">{{blocks[7]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="9">{{blocks[8]}}</app-miner-card>
  <app-miner-card *ngSwitchCase="10">{{blocks[9]}}</app-miner-card>
</div>

Depending on the number the cards get switched:

  precedingBlock() {
    this.minerCounter--;
  }

  nextBlock() {
    this.minerCounter++;
  }

Upvotes: 0

lemek
lemek

Reputation: 798

I am still not exactly sure about what are you trying to achieve. I think it might be nice to provide some nicer code, and maybe some simplified app in stackblitz (or any other sandbox). A lot depends on where you displaying your cards, is it in main component? Is it nested in ?

At this point I've created something like this: stackblitz link

Upvotes: 1

Related Questions