Angular 4, Conditional display with ngIf

Question

help to fix condition to display data. I get model of M through async service, so i use >model?.something< notation to avoid errors when model is still undefined. title is null or 'somestring'. Something wrong with expression. Whatever form i choose it always display one of cases. I have avoided this type expression early and can not translate correctly to typescript.

import { Component } from '@angular/core';
import { M } from './model';

@Component({
  selector: 'app-test',
  template: `
<p *ngIf="model1?.title !== null">
  Display text if title exist('common string')
</p>
<p *ngIf="model2?.title === null">
  Display text if title equal to null
</p>
  `,
  styleUrls: ['./test.component.css']
})

export class TestComponent {
  model1: M;
  model2: M;
  constructor() {
    this.model1 = {
      title: 'username'
    };
    this.model2 = {
      title: null
    };
  }
}

export class M {
    public title: string;

    public constructor(){}
}

@PrithiviRaj Why would this make a difference here? You don't even know if his model actually has a constructor. — malifa
– malifa, Commented Nov 24, 2017 at 10:27
@lexith You are right error should not come with the given sample but error will occur if he tries to give title like this.model1.title='username' so only he's getting error like model is undefined. May be the real code is missing here — Prithivi Raj
– Prithivi Raj, Commented Nov 24, 2017 at 10:55

sanjay kumar · Accepted Answer · 2017-11-24 10:56:50Z

1

Please Try:

<h1 *ngIf="model1.title!==null">
    OK
  </h1>

   <h1 *ngIf="model2.title!==null">
    OK
  </h1>

answered Nov 24, 2017 at 10:56

sanjay kumar

8587 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4, Conditional display with ngIf

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related