CODEWITHSUNDEEP
angularinputangular-ng-if
gyozo kudor
gyozo kudor

Reputation: 6335

*ngIf not working if expression contains a string

I have a todo component with read, edit and insert modes. The template looks something like this:

<form *ngIf="editMode=='edit' || editMode=='insert'" class="form" (ngSubmit)="onSubmit()" [formGroup]='todoForm' novalidate>
  .... edit and insert mode contents
</form>

<span style="line-height: 33px;" *ngIf="editMode=='read'">
  .... read mode contents

</span>

The todo component contains these two input variables:

  @Input() todo: Todo;
  @Input() editMode: string;

And I have a list component that has a list of todo components like this:

<div class="container">
  <div class='todos-container'>
    <ul class="list-group">

      <li *ngFor="let todo of todos" class="list-group-item clearfix">
        <todo-component [todo]='todo' [editMode]='read'></todo-component>
      </li>
      <li class="list-group-item clearfix">
        <todo-component [todo]='newTodo' [editMode]='insert'></todo-component>
      </li>
    </ul>
  </div>
</div>

The problem is that neither the form nor the span are visible. When editMode is a simple boolean then it works correctly. *ngIf="editMode" or *ngIf="!editMode" works. What am I doing wrong?

Upvotes: 0

Views: 1846

Answers (2)

AAA
AAA

Reputation: 51

Keep in mind:

[directive]= “string” directive = “valueOfAVariable”

Upvotes: 1

yurzui
yurzui

Reputation: 214175

Try 

[editMode]="'read'"

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions

or

editMode="read"

for example

<todo-component [todo]='todo' editMode="read"></todo-component>

then editMode will be string read

See also

Upvotes: 2

Related Questions