Getting the value of a mat-panel in ngIf?

0
votes

I'm trying to use angular's ngIf to check what the title of my mat-panel box is before applying some changes to the content.

<mat-expansion-panel-header id="head">
      <mat-panel-title>
        Demo1
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>
<mat-expansion-panel hideToggle>
                <mat-expansion-panel-header id="head">
                  <mat-panel-title>
                    Demo
                  </mat-panel-title>
                  <img class="panel-image" src="assets/demo.png">
                </mat-expansion-panel-header>
                <div class="holder">
                  <mat-card id="CARDBOX" *ngFor="let box of box">
                      <img class="logoy" src="{{box.image}}" alt="Tesla" height=35px>
                      <a href="{{box.link}}" class="button">{{box.button_name}}</a>
                      <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
                  </mat-card>
</mat-expansion-panel>

<mat-expansion-panel-header id="head">
      <mat-panel-title>
        Demo2
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>
<mat-expansion-panel hideToggle>
                <mat-expansion-panel-header id="head">
                  <mat-panel-title>
                    Demo
                  </mat-panel-title>
                  <img class="panel-image" src="assets/demo.png">
                </mat-expansion-panel-header>
                <div class="holder">
                  <mat-card id="CARDBOX" *ngFor="let box of box2">
                      <img class="logoy" src="{{box.image}}" alt="Tesla" height=35px>
                      <a href="{{box.link}}" class="button">{{box.button_name}}</a>
                      <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
                  </mat-card>
</mat-expansion-panel>

Since I want headers to be generated by ngFor, is there is a way that I can check which header is which using ngIf before generating the body content of the panel? Like

<ngIf title===Demo>
    <mat-card **apply this**/>

The reason I want to do this is because I want to generate both the headers and the content using ngFor. The headers can be generated in the same way, but the content is very different so it needs to check which header it is being placed under. Is this possible using ngIf?

I guess what I'm trying to do is like an if statement in python or java. I want it IF the title is one thing, then populate the content with something. IF the title is something else, then populate the content with something else. Does that make sense?

2
htmlcssangularif-statementangular-material
can you share your ngFor loop? - Elmehdi
Yes, it's been edited. - bensalerno
And minor point, having multiple Ids with the same value is not valid HTML. I'd recommend deleting that from all your elements. In angular you almost never need the Id attribute. - Austin T French
Should I use class instead? - bensalerno

2 Answers

0
votes

The code should be like that way...

<mat-expansion-panel-header id="head" *ngIf="title === 'Demo'">
      <mat-panel-title>
        Demo1
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>

<mat-expansion-panel-header id="head" *ngIf="title === 'Demo2'">
      <mat-panel-title>
        Demo2
      </mat-panel-title>
      <img class="panel-image" src="assets/demo.png">
</mat-expansion-panel-header>
0
votes

I use a div here for an example: But you can use a function to get only the objects you actually want to create in the DOM:

<div *ngFor="let item of getItems()">
  <h3>{{item.title}}</h3>
      {{item.value}}
</div>

And the TS:

export class AppComponent  {
  items = [
    {title: "Demo", value: "Should Show"},
    {title: "Demo 2", value: "Should NOT Show"},
  ]

  getItems() : any[] {
    return this.items.filter(f => f.title == "Demo");
  }

  name = 'Angular ' + VERSION.major;
}

This would let you filter items.

Edit

Upon clarification though, what you want to do is change the displayed "Title" in which case.

That is not what ngIf is for; NgIf has one purpose: When the expression evaluates to true to render the element in the DOM.

For what you want to do, you can use a standard expression. An example below using the ternary operator:

<div *ngFor="let item of items">
  <h3>{{item.title == "Demo" ? item.title : "Alter-name"}}</h3>
      {{item.value}}
</div>

If you are unfamiliar with the ternary operator:

if (item.title == "Demo) { 
  showValue(item.Title);
}
else {
  showValue("Alternate Value");
}

this has effectively the same meaning as

item.title == "Demo" ? item.title : "Alter-name"