Blank page when connect the parent component with child-CodePudding

I was trying to pass a variable from parent component to child component. For this purpose, I wanted to use @Input() method but when I tried to connect the two component, I got a blank page in whole site. Simply, web site doesn't respond at all.

I write the code below to parent.html

<app-test [id] = "id" [name]="name" [request]="request" [label]="label"></app-test>

Then, I add the input methods into test.ts (child)

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  @Input() id =-1;
  @Input() name='';
  @Input() request='';
  @Input() label='';

  parameters:any=[];
  countryId:number=0;
  apiList:any;

  constructor() { }

  ngOnInit(): void {
  }

}

And then, I got a blank page. No error at the start but after 30 seconds, I got the error below in inspector console. Can you help me out please?

Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

Edit: My parent component:

import { Component, OnInit } from '@angular/core';
import {MenuItem} from 'primeng/api';
import { TheDataOfEverythingService } from 'src/app/service/the-data-of-everything.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  display:boolean = false;
  items: MenuItem[]=[];
  sidebarItems: MenuItem[]=[];
  id:number=-1;
  name:string='';
  request:string='';
  label:string='';

  constructor(private service:TheDataOfEverythingService) { }

  ngOnInit(): void {

    this.getApiList();

    this.items = [
      {
        label:'Home',
        icon:'pi pi-fw pi-home',
        routerLink: '/home'
      },
      {
        label:'Contact',
        icon:'pi pi-fw pi-phone',
        routerLink: ['/contact'],
      },
      {
        label:'Sign Up',
        icon:'pi pi-fw pi-user-plus'
      }
  ];
  
    this.sidebarItems = [
      {
      label:'World',
      icon:'pi pi-fw pi-globe',
      items: []
      },
    ]
  }


  apiList:MenuItem[]=[];
  getApiList(){
    this.service.getAllData("ApiList")
    .subscribe(data=> {
      this.apiList = data as MenuItem[];

      let index;
      this.apiList.forEach(item=>{
        const newMenuItem: MenuItem ={
          label: item.label,
          //icon: item.icon,
          routerLink: item.routerLink
        }
        if(newMenuItem.routerLink.includes('world')){
          index = this.sidebarItems.findIndex(e=> e.label == "World")
          this.sidebarItems[index].items?.push(newMenuItem);
        }
      })
    });
  }
}

edit 2: HTML of my parent component:

<p-menubar [model]="items">
    <ng-template pTemplate="start">
        <a (click)="display = true">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Noun_Data_2223266.svg" height="40" >
        </a>
    </ng-template>
    <ng-template pTemplate="end">
        <input type="text" pInputText placeholder="Search">
    </ng-template>
</p-menubar>

<p-sidebar [(visible)]="display">
    <p-panelMenu [model]="sidebarItems" [style]="{'width':'280px'}"></p-panelMenu>
</p-sidebar>

<app-test [id] = "id" [name]="name" [request]="request" [label]="label"></app-test>

CodePudding user response：

What do you have in test.component.html? If it is empty then you will have a blank page.

Here is maybe the answer for your console error : https://stackoverflow.com/a/6095695/20063801

CodePudding user response：

Okay, I found the solution. I was using my parent component as a header in whole web site. So, I also import it to the child component. So I think, when I also use the @Input() method, I created some kind of loop. And due to this site didn't respond.

You can see the <app-header></app-header> line in the HTML below. When I delete this line, the site started to work without a problem.

<app-header></app-header>

<body>
    <div >
        <div >
            <div >
                <h1 >Test</h1>
            </div>
        </div>
    </div>
    
</body>

CodePudding user response：

you make display:boolean = false; is this for the Html page ?