CODEWITHSUNDEEP
htmlangulartypescript
Karim
Karim

Reputation: 39

How to display name of the card?

I made this game in angular that display pictures of cards but I want to also display their names on the screen but I don't know how. Sometimes it shows the same name for all the cards or not the right name.

This is my TypeScript class Paquet, I tried a lot of ways to display the name but no success

 creationPaquet() {        
        for (let sor in this.sorte) {
            for (let val in this.valeur) {

                // here I display the image
                this.paquet.push("assets/images/" + this.sorte[sor] + "_" + this.valeur[val] + ".gif");

                // here I try to display the name in the console but I want to display it on the screen
                if (this.sorte[sor] === this.sorte[0] && this.valeur[val] === this.valeur[0]) {
                    console.log("2 de pique");
                }       
            }
        }

        this.brasser();
        return this.paquet.pop();
    }

Upvotes: 0

Views: 187

Answers (1)

wnvko
wnvko

Reputation: 2120

You can create a interface that should contain image location and card name like this:

interface Card {
  name: string;
  location: string;
}

Then strongly type your paquet collection and fill it like this:

  paquet: Card[] = [];

  public creationPaquet() {
    for (let sor in this.sorte) {
      for (let val in this.valeur) {
        this.paquet.push({
          // construct the name as you need
          name: `${val} de ${sor}`,
          location: "assets/images/" + this.sorte[sor] + "_" + this.valeur[val] + ".gif"
        });
      }
    }
    this.brasser();

    // pop entire object
    return this.paquet.pop();
    // pop only the location
    return this.paquet.pop().location;
  }

Note you can return the entire object including the name and location, or only the location depending on your needs.

Upvotes: 2

Related Questions