How to fix the following ngIf directive in angular 5?

Question

I am very new at angular and I tried to learn angular 5 from basic. I just tried the ngIf directive and I found that if part has not got any problem but when I use else part as in the following code the error saying is not a known element. I think there is something wrong in the else part. Help me.

now I edited the quote and it still sends the same error. Is there something I'm missing. I'm very new to angular.

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

    @Component({
      selector: 'app-test',
      template: `
        <h2 *ngIf = "isVisible; else elseBlock" >
            This is visible
        </h2>
        <ng-template #elseBlock>
          <h2>
              This is not visible.
          </h2>
        </ng-template>
      ` ,
      styles: []
    })

    export class TestComponent implements OnInit {
      public name = "Dipesh";
      public isVisible = true;
      constructor() { }
      ngOnInit() {
      }
    }

Possible duplicate of [How to use \*ngIf else in Angular?](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else-in-angular) - you need to put the `else` part inside the quotes. — Joe Clay, Apr 17 '18 at 15:47
it look correct for angular5 , are u sure you not using newest angular6? — happyZZR1400, Apr 17 '18 at 15:50
I was just going through tutorials on angular 5 and I stuck in this thing. — dipesh, Apr 17 '18 at 16:02
If the answer helped you solve the problem, do not forget to vote. — Maicon Heck, Apr 18 '18 at 03:19

score 2 · Accepted Answer · answered Apr 17 '18 at 15:52

2

*ngIf = "isVisible"; else elseBlock

should be

*ngIf = "isVisible; else elseBlock"

You had the closing " in the wrong place ending the *ngIf prematurely.

answered Apr 17 '18 at 15:52

Igor

60,821
10
100
175

@DipeshPaudel - it does work. See this [stackblitz](https://stackblitz.com/edit/angular-tqjfm7). Your only problem was the one I corrected above in my answer. – Igor Apr 17 '18 at 16:28

happyZZR1400 · Answer 2 · 2018-04-17T16:01:25.380

i think the problem is missing quote

 @Component({

  selector: 'my-app',
  template: `
    <div>
        <h2 *ngIf="isVisible; else elseBlock">
            This is visible
        </h2>
        <ng-template #elseBlock>
          <h2>
              This is not visible.
          </h2>
        </ng-template>
    </div>
  `,
})
export class App {
  name:string;
  isVisible:boolean;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
    this.isVisible=true;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Maicon Heck · Answer 3 · 2018-04-17T16:06:47.963

Look at the example from angular.io docs: https://angular.io/api/common/NgIf

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
class NgIfElse {
  show: boolean = true;
}

Like @Joe Clay said, you have to putting your else inside the quotes.

How to fix the following ngIf directive in angular 5?

3 Answers3