Angular6：数据未传递给子组件

Question

I am trying to display loading message when the page is loaded. I have created loader component as child component and value is passed from parent. But for some reason loader is not being loaded.

I have tried the following code.

I have created a component for loader as below:

loader.ts

@Input() showLoader: boolean = false;

loader.html

<div class="modal-backdrop in" [style.display]="showLoader ? 'block' : 'none'">

Now From the component I need to show this loader, I pass on value as below:

html

<app-loader [showLoader]="loaderOn"></app-loader>

ts

public loaderOn: boolean = false;

ngOnInit() {
    this.loaderOn = true;
}

Answer 1

The code you shared should work... perhaps there is something missing or an error somewhere in your code; To make the change more observable, i added a 2 second delay in ngOnInit();

relevant app.component.ts :

  loaderOn: boolean = false;

  ngOnInit() {
    setTimeout(() => {
      this.loaderOn = true;
    }, 2000)
  }

relevant app.component.html :

Value sent from the parent: <mark>{{loaderOn}}</mark>
<app-loader [showLoader]="loaderOn"></app-loader>

relevant loader.component.html :

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

@Component({
  selector: 'app-loader>',
  template: `
    <p>Value received in the child: <mark>{{showLoader}}</mark> </p>

    <div class="modal-backdrop in" [style.display]="showLoader ? 'block' : 'none'">
    ...this is the div which we wanted to style...
    </div>
  `,
  styles: [`*{color:blue}`],
})
export class LoaderComponent {
  @Input() showLoader: boolean = false;

}

complete working stackblitz here

Answer 2

Why not just use an ngIf?

loader.html

<div class="modal-backdrop in">

and hide and show with

<app-loader *ngIf="loaderOn"></app-loader>