title: Angular directive *ngIf not working as intended
body: <p>I have this block of html in my template to show or hide the div.</p>
  
  <pre><code>&lt;div *ngIf="csvVisible"&gt;
    &lt;p&gt;Paragraph works&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my component.</p>
  
  <pre><code>export class SettingsComponent implements OnInit {
  
    csvVisible: boolean = false;
  
    private dataSource: string[];
  
    @ViewChild(MatTable, { static: true }) table: MatTable&lt;any&gt;;
  
    constructor(private dialog: MatDialog, private templateParserService: TemplateParserService) { }
  
    ngOnInit() {
      this.templateParserService.subscribe({
        next(result: string[]) {
          if (result !== null) {
            this.dataSource = result;
  
            if (this.dataSource &amp;&amp; this.dataSource.length) {
              this.csvVisible = true;
            } else {
              this.csvVisible = false;
            }
          }
        },
        error(error: Error) {
          console.log(error.message);
        }
      });
    }
  </code></pre>
  
  <p>Eventhough the DIV is hidden at start, it doesnt automatically show / hide on the <code>csvVisible</code> value change. Value of <code>csvVisible</code> is properly set when the observer emits data. <code>[hidden]="csvVisible"</code> isn't working either.</p>
  
  <p><strong>Edit :</strong> </p>
  
  <p>Subscriber registration on the service is done by the following code.</p>
  
  <pre><code>  private subject = new Subject&lt;string[]&gt;();
  
    public subscribe(observer: any): Subscription {
      return this.subject.subscribe(observer);
    }
  </code></pre>