Angular6: данные не передаются дочернему компоненту

Question

Я пытаюсь отобразить сообщение о загрузке при загрузке страницы.Я создал компонент загрузчика как дочерний компонент, и значение передается от родителя.Но по какой-то причине загрузчик не загружается.

Я попробовал следующий код.

Я создал компонент для загрузчика, как показано ниже:

loader.ts

@Input() showLoader: boolean = false;

loader.html

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

Теперь из компонента, мне нужно показать этот загрузчик, я передаю значение, как показано ниже:

html

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

ts

public loaderOn: boolean = false;

ngOnInit() {
    this.loaderOn = true;
}

Answer 1

Почему бы просто не использовать ngIf?

loader.html

<div class="modal-backdrop in">

и скрывать и показывать с помощью

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

Answer 2

Код, которым вы поделились, должен работать ... возможно, что-то отсутствует или где-то в вашем коде ошибка;Чтобы сделать изменение более заметным, я добавил 2-секундную задержку в ngOnInit ();

релевантный app.component.ts :

  loaderOn: boolean = false;

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

релевантный app.component.html :

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

релевантно 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;

}

завершено рабочий стек бликов здесь