angular - How to use ternary operator

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  isPhoneAllowed:boolean = false;
  
  toggleValue(){
    this.isPhoneAllowed = !this.isPhoneAllowed;
  }
}

app.component.html

<h2>Angular Ternary Operator Example</h2>

<h3>
    Phone is 
    {{isPhoneAllowed? "allowed" : "not allwed"}}
</h3>

<button 
    (click)="toggleValue()"
    style="padding:12px;">
        Toggle Value
</button>

More Angular tutorials

• angular - How to create function
• angular - Display value using interpolation
• angular - Interpolation expression
• angular - Interpolation JavaScript method
• angular - Interpolation call method
• angular - How to use if then condition
• angular - How to use if statement
• angular - Loop through an array of objects
• angular - How to use nested loop
• angular - How to use Button click event
• angular - How to call function on Button click
• angular - How to generate random number
• angular - Generate random number in range
• angular - Generate random whole number
• angular - How to submit form data