Angular6: Parent component fails to pass data to child component

Question

Angular6: Parent component fails to pass data to child component

My goal is to implement a loading message that displays when the page is loaded. I have created a loader component as a child component, and I am passing a value from the parent. However, for unknown reasons, the loader is not being displayed.

I have attempted the following code:

I set up a component for the loader with the following content:

loader.ts

@Input() showLoader: boolean = false;

loader.html

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

When trying to display this loader from the main component, I pass the value like so:

html

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

ts

public loaderOn: boolean = false;

ngOnInit() {
    this.loaderOn = true;
}

javascript angular typescript angular6

Answer 1

Answer №1

Your code seems like it should work, but there might be a missing piece or an error hiding in the shadows. To highlight the change better, I introduced a 2-second delay in the ngOnInit();

Key parts of app.component.ts:

  loaderOn: boolean = false;

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

Essential snippets from app.component.html:

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

Important bits from 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;

}

For a complete solution, check out this live example on StackBlitz

Answer 2

Your code seems like it should work, but there might be a missing piece or an error hiding in the shadows. To highlight the change better, I introduced a 2-second delay in the ngOnInit();

Key parts of app.component.ts:

  loaderOn: boolean = false;

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

Essential snippets from app.component.html:

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

Important bits from 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;

}

For a complete solution, check out this live example on StackBlitz

Answer 3

Answer №2

Is there a reason you're not considering using ngIf instead?

loader.html

<div class="modal-backdrop in">

You can easily hide and show like this:

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

Answer 4

Is there a reason you're not considering using ngIf instead?

loader.html

<div class="modal-backdrop in">

You can easily hide and show like this:

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

Angular6: Parent component fails to pass data to child component

Answer №1

Answer №2

Similar questions

Error message in MS Edge API: 'browser has not been defined'

Encrypting href links in Nodemailer with Handlebars for forwarding purposes

Angular applications encountering issues with Express delete-route functionality

Bring in items and then go through each one

The Vue feature responsible for displaying information on the webpage is currently not working as expected

The persistent issue with Vue.js is the constant occurrence of undefined problems

The type does not contain a property named `sort`

Connecting data from a .ts file in one webpage to the HTML content of another webpage

Inject Angular 2 component into designated space

Issue with THREE.js Line Object not displaying in web browser

Updating Rails record using Ajax with select_tag and onchange functionality

I require assistance in displaying a dynamic, multi-level nested object in HTML using AngularJS

Error: Unable to locate module: Issue: Unable to find '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'

What is the process for converting a UTC datetime string into the local timezone of users?

Google Bar Graphs Cannot Display Decimal Values

Exported data in Vue3 components cannot be accessed inside the component itself

The JQuery File-Upload plugin remains inactive even after a file has been chosen

Using JavaScript to generate JSON data in a plain text format rather than using HTML

The active class in the Vue.js component navigation only takes effect after the second click

Using React's state to hide a div reveals the div with a flicker when saving the information