I want to display data as either true or false in Angular

1

I want to display the user list only when the check is true, and show that data is not available if the check is false.

Here I am adding my ts file and html file

import { Component, OnInit } from '@angular/core';
import { UserDataService } from '../services/user-data.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  check: any = false;
  pageTitle = 'Users List';
  errorMessage = '';
  //users: IUser[]=[];
  users: any;
  constructor(private userService: UserDataService) { }

  ngOnInit(): void {
    this.userService.users().subscribe({
      next: (users: any) => {
        this.users = users;
        this.check = true;
        console.log("this.users");
        console.log(this.users);
      },
      error: (err: any) => this.errorMessage = err


    })
  }

}
<p>users works!</p>
<div>*********************User Component*******************</div>
<p>{{check}}</p>
<div *ngIf="check">Data not available</div>
<ul *ngIf="check">
    <li *ngFor="let user of users">
        {{user.name}}
    </li>

</ul>

Reference

2

Hello @Parker13,
The variable, check, is initially false. So, the the ul with the *ngIf=“check” should show up. However, we’d like to hide the div with the “Data is not available.” message when check is true. So we add a not operator in front of check, as shown in the code below.

<div *ngIf="!check">Data is not available.</div>
<ul *ngIf="check">
    <li *ngFor="let user of users">
        {{user.name}}
    </li>
</ul>
1 Like