How to use a if statement in HTML in Angular

Question

this might be a self explanatory question , but I wanted to know how or if I can implement an if query in my HTML code in Angular in the app.component.ts file. My plan is as follows:

info.page.ts:

@Component({
  selector: 'app-info',
  templateUrl: 'info.page.html',
  styleUrls: ['info.page.scss'],
  encapsulation: ViewEncapsulation.None,
  template: `
    <ion-content>
      <div id="wrapper">
        <app-version-info></app-version-info>
        <attributions-info></attributions-info>
        <div>{{value}}</div>
        <div class="gauges-container">
        <?php
          if({{value}}<2000){
            echo "<mwl-gauge class="five" [max]="2200" [min]="800" [dialStartAngle]="15" [dialEndAngle]="165" [value]="value" [animated]="true" [animationDuration]="0.5"> </mwl-gauge>";
          }else{
            echo "<mwl-gauge class="six" [max]="2200" [min]="800" [dialStartAngle]="15" [dialEndAngle]="165" [value]="value" [animated]="true" [animationDuration]="0.5"> </mwl-gauge>";
          }
        ?>
        </div>
      </div>
    </ion-content>
  `,

})

Thank you for your help

Does this answer your question? [What is the best way to conditionally apply attributes in AngularJS?](https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs) — Andreas, Apr 09 '21 at 10:52
sorry to send you to the officials docs:https://angular.io/guide/built-in-directives#adding-or-removing-an-element-with-ngif Has you read it? There are also a good tutorial — Eliseo, Apr 09 '21 at 11:44

score 1 · Accepted Answer · answered Apr 09 '21 at 11:36

Seeing that the only change between both the elements is a CSS class selector, you could dynamically bind the selector using the ngClass property.

Try the following

<div class="gauges-container">
  <mwl-gauge 
    [ngClass]="value < 2000 ? 'five' : 'six'" 
    [max]="2200" 
    [min]="800" 
    [dialStartAngle]="15" 
    [dialEndAngle]="165" 
    [value]="value" 
    [animated]="true" 
    [animationDuration]="0.5"
  ></mwl-gauge>
</div>

score 0 · Answer 2 · answered Apr 09 '21 at 11:16

here should be explained well enough, but basically you dont have the right to use php code like you do. I would recommend to implement it like the following.

You shouldn't forget that angular get rendered in the client side, which is the reason why you can not use php

info.page.ts

@Component({
  selector: 'app-info',
  styleUrls: ['info.page.scss'],
  encapsulation: ViewEncapsulation.None,
  template: `
  <ion-content>
      <div id="wrapper">
        <app-version-info></app-version-info>
        <attributions-info></attributions-info>
        <div>{{value}}</div>
        <div class="gauges-container">
           <mwl-gauge *ngIf="value < 2000" class="five" [max]="2200" [min]="800" [dialStartAngle]="15" [dialEndAngle]="165" [value]="value" [animated]="true [animationDuration]="0.5"> </mwl-gauge>
           <mwl-gauge *ngIf="value >= 2000" class="six" [max]="2200" [min]="800" [dialStartAngle]="15" [dialEndAngle]="165" [value]="value" [animated]="true" [animationDuration]="0.5"> </mwl-gauge>
        </div>
      </div>
    </ion-content>
`,
})
export class AppInfoComponent {
 value: number

 ngOnInit() { 
  setTimeout(() => {
    this.value = 2000 // Bind it with your api
  }, 2000)
 }
}

How to use a if statement in HTML in Angular

2 Answers2

info.page.ts