Angular directive *ngIf not working as intended

Question

I have this block of html in my template to show or hide the div.

<div *ngIf="csvVisible">
  <p>Paragraph works</p>
</div>

This is my component.

export class SettingsComponent implements OnInit {

  csvVisible: boolean = false;

  private dataSource: string[];

  @ViewChild(MatTable, { static: true }) table: MatTable<any>;

  constructor(private dialog: MatDialog, private templateParserService: TemplateParserService) { }

  ngOnInit() {
    this.templateParserService.subscribe({
      next(result: string[]) {
        if (result !== null) {
          this.dataSource = result;

          if (this.dataSource && this.dataSource.length) {
            this.csvVisible = true;
          } else {
            this.csvVisible = false;
          }
        }
      },
      error(error: Error) {
        console.log(error.message);
      }
    });
  }

Eventhough the DIV is hidden at start, it doesnt automatically show / hide on the csvVisible value change. Value of csvVisible is properly set when the observer emits data. [hidden]="csvVisible" isn't working either.

Edit :

Subscriber registration on the service is done by the following code.

  private subject = new Subject<string[]>();

  public subscribe(observer: any): Subscription {
    return this.subject.subscribe(observer);
  }

Chellappan வ · Accepted Answer · 2020-01-26 04:30:02Z

1

Since you are using Object inside subscribe, this points to current subscribe object, Instead of using subscribe({next:()}) try using this way

component.ts

 this.templateParserService.subscribe((result: string[])=>{
            if (result !== null) {
                 this.dataSource = result;
               if (this.dataSource && this.dataSource.length) {
                 this.csvVisible = true;
              } else {
                 this.csvVisible = false;
              }
            }
    },(error: Error)=>{
            console.log(error.message);
    });

answered Jan 26, 2020 at 4:30

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

3 Comments

Saminda Peramuna Over a year ago

Thanks! This did work without the error function as subscrribe only takes one argument.

Saminda Peramuna Over a year ago

I am using a custom subscriber for my service. Its not a HttpClient response but a cusom emitter. I have updated the code including the subscribe method.

Chellappan வ Over a year ago

try this public subscribe(...observer: any) { return this.subject.subscribe(...observer); }

Collectives™ on Stack Overflow

Angular directive *ngIf not working as intended

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related