*ngIf Angular not binding the right values

user_7055311 0
Viewed 71

I am using the below code in ngOnInit() to use it in the HTML to bind some content and for some reason unable to identify the issue and not printing anything on the web page! Can someone guide or help, please?

TypeScript:

public ngOnInit() { 

    let one = true;
    let two = false;
    let three = true;
    let four = true;

    let caseA = one && two && three && four;
    let caseB = one && !two && three && four; // should be true
    let caseC = one && two && !three && !four;
    let caseD = one && two && three && !four;
    let caseE = one && !two && !three && !four;
    
    console.log("cases: ", caseA, caseB, caseC, caseD, caseE);

}

HTML:

<p class="msg" *ngIf="caseA">{{ valueA }}</p>
<p class="msg" *ngIf="caseB">{{ valueB }}</p>
<p class="msg" *ngIf="caseC">{{ valueC }}</p>
<p class="msg" *ngIf="caseD">{{ valueD }}</p>
<p class="msg" *ngIf="caseE">{{ valueE }}</p>

Thank you

angular typescript html javascript
3 Answers

You need to declare public variables in your .ts file, so template can access them

export class AppComponent implements OnInit{

 public caseA = true

  public ngOnInit() {

    let one = true;
    let two = false;
    let three = true;
    let four = true;

    let caseA = false // have no impact at ngIf in template
    let caseB = one && !two && three && four; // should be true
    let caseC = one && two && !three && !four;
    let caseD = one && two && three && !four;
    let caseE = one && !two && !three && !four;

    console.log("cases: ", caseA, caseB, caseC, caseD, caseE);

}

html

<p class="msg" *ngIf="caseA">Hey there</p>
user_72088120

I believe you just haven't declared at the right spot. Try declaring the variables as public in your component like the following :

export class YourComponent implements OnInit {
    public caseA: boolean;
    public caseB: boolean;
    public caseC: boolean;
    public caseD: boolean;
    public caseE: boolean;

  ngOnInit(): void {
    const one = true;
    const two = false;
    const three = true;
    const four = true;

    this.caseA = one && two && three && four;
    this.caseB = one && !two && three && four; // should be true
    this.caseC = one && two && !three && !four;
    this.caseD = one && two && three && !four;
    this.caseE = one && !two && !three && !four;

    console.log("cases: ", this.caseA, this.caseB, this.caseC, this.caseD, this.caseE);
  }
user_159082510

You need to declare the variables caseA, caseB, caseC.... as instance variables by declaring them outside the methods but inside the class.

Then, you should use those variables inside the ngOninit method with this keyword.

Since you have used valueA, valueB, valueC.... in HTML file, you need to declare and initialize them in the ts file too.

You don't need to put public keyword, if you are going to use those instance variables only within the component.

export class AppComponent implements OnInit  {

caseA: boolean;
caseB: boolean;
caseC: boolean;
caseD: boolean;
caseE: boolean;

valueA = 'a';
valueB = 'b';
valueC = 'c';
valueD = 'd';
valueE = 'e';

public ngOnInit() { 

 let one = true;
 let two = false;
 let three = true;
 let four = true;

 this.caseA = one && two && three && four;
 this.caseB = one && !two && three && four; // should be true
 this.caseC = one && two && !three && !four;
 this.caseD = one && two && three && !four;
 this.caseE = one && !two && !three && !four;

 console.log("cases: ", this.caseA, this.caseB, this.caseC, this.caseD, 
 this.caseE);

 }

}
user_105327510
Related