*ngIf is not working in my Html but ngIf showing first content

Question

I had seen a lot of questions regarding this problem. but them not helped for me.

Here the my Html

 <div class="pl-lg-4">
          <div *ngIf="isStorySelected; else hi" class="row">
            <div class="col-lg-12">
              <div class="form-group">
                <label class="form-control-label" for="input-username">Story Name</label>
                &nbsp; &nbsp;<label class="form-control-label" for="input-username">Selected option</label>
              </div>
            </div>
          </div>
          <ng-template #hi>
            <div class="row">
              <div class="col-lg-12">
                <div class="form-group">
                  <label class="form-control-label">Select Story</label>
                  <select class="form-control form-control-alternative" value="">
                    <option>some option one</option>
                    <option>some option 2</option>
                  </select>
                </div>
              </div>
            </div>
          </ng-template>

if I used *ngIf like this it's shows nothing. but using like ngIf shows first content.

Here the my component.

import { Component, OnInit } from '@angular/core';
import { Route } from '@angular/compiler/src/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-create-episodes',
  templateUrl: './create-episodes.component.html',
  styleUrls: ['./create-episodes.component.scss']
})
export class CreateEpisodesComponent implements OnInit {

  public activeRoutes: ActivatedRoute;
  public storyId: string;
  public isStorySelected = false;

  constructor(activeRoutes: ActivatedRoute) {
    this.activeRoutes = activeRoutes;

  }

  ngOnInit() {
    this.storyId = this.activeRoutes.snapshot.paramMap.get('id');
    if (this.storyId) {
      console.log('1');
      this.isStorySelected = true;
    } else {
      console.log('2');
      this.isStorySelected = false;
    }
  }
}

here I added the stackblitz url: https://stackblitz.com/edit/angular-lmxswk?file=src/app/app.component.ts

I already imported the CommonModule to the appModule.

And Im using the latest version of Angular. (10)

Answer 1

Looking at the interface of ActivatedRoute

paramMap return Observable<ParamMap>, Hence you need to convert it to observable

name = 'Angular';
public storyId: Observable<boolean>;
public router: ActivatedRoute;

constructor(router: ActivatedRoute) {
  this.router = router;
}

ngOnInit(){
    this.storyId = this.router.paramMap.pipe(
      map((res) =>{
        const currentId = res.get('id');
        if(currentId){
          return  true;
        } else {
          return false;
        }
    }));
  }

Inside template

<div *ngIf="storyId | async; else hi" class="row"></div>

Here is working stackblitz