Identifier not defined

Question

I'm a beginner in Angular 9 and I'm trying to create an application. But I have a few little problems concerning the definition of properties. I hope that someone will be kind enough to help me. First of all, my project looks like that:

My app.component.html is directed to my manager folder with that:

<button mat-raised-button id="Upgrade (click)="modal='Managers'">Managers</button>
<app-manager *ngIf="modal=='Managers'" (closemodalevent)="modal=null" [manager]="world.managers.pallier"></app-manager>

My app.component.ts:

import { Component, Input } from '@angular/core';
import { RestserviceService } from './restservice.service';
import { World, Product, Pallier } from './world';
import { MatDialogConfig, MatDialog } from '@angular/material/dialog';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  products = [
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" }
  ];
  title = 'AngularProject';
  world: World = new World();
  server: String;
  qtmulti: number = 1;
  modal: string=null;

  constructor(private service: RestserviceService) {
    this.server = service.getServer();
    service.getWorld().then(world => { this.world = world; });
  }
}

My manager.component.html:

<div class="Modal" (clickOutside)="closemodal()">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div>
    <div *ngFor="let manager of world.managers.pallier">
      <div *ngIf="!manager.unlocked" class="ManagerLayout">
        <div>
          <div class="logo"><img class="LogoImage" [attr.src]="server+manager.logo"></div>
        </div>
        <div>
          <div class="ManagerName">{{manager.name}}</div>
          <div class="ManagerCible">{{world.products.product[manager.idcible-1].name}}</div>
        </div>
        <div class="ManagerCost">{{manager.seuil}}</div>
      </div>
      <button mat-raised-button id="HireButton" (click)="hireManager(manager)"
              [ngClass]="{'selectable': (world.money >= manager.seuil)}"> Hire !</button>
    </div>
  </div>
</div>

And it's here that I'm getting an error for both world and server, that are:

Identifier 'world' is not defined. The component declaration, template variable declarations, and element references do not contain such a member.

Identifier 'server' is not defined. The component declaration, template variable declarations, and element references do not contain such a member.

However I already defined server and world in my app.component.ts...

I thanks in advance the people who would take the time to help me.

Edit: Sorry I forgot to put it here since it was a friend that did it for me that .ts

My manager.component.ts:

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { World, Pallier } from '../world';

@Component({
  selector: 'app-manager',
  templateUrl: './manager.component.html',
  styleUrls: ['./manager.component.css']
})
export class ManagerComponent implements OnInit {
  canclose=false;
  @Input() manager: Pallier[];

  @Output() closemodalevent = new EventEmitter<void>();

  constructor() { }

  ngOnInit(): void {
  }

  hireManager(manager : Pallier){
    alert(manager.name + 'has been hired')
    if (this.world.money >= manager.seuil) {
      this.world.money = this.world.money - manager.seuil;
      this.world.managers.pallier[this.world.managers.pallier.indexOf(manager)].unlocked = true;
      this.world.products.product.forEach(element => {if (manager.idcible == element.id) {this.world.products.product[this.world.products.product.indexOf(element)].managerUnlocked = true;}});
    }
  }

  closemodal(){
    console.log(this.canclose);
    if(this.canclose){
      this.closemodalevent.emit();
    }else{
      this.canclose=true;
    }
  }

My world.ts:

export class World {
    name : string; 
    logo : string;
    money: number; 
    score: number; 
    totalangels: number;
    activeangels: number;
    angelbonus: number;
    lastupdate: string; 
    products : { "product": Product[] };
    allunlocks: { "pallier": Pallier[]};
    upgrades: { "pallier": Pallier[]};
    angelupgrades: { "pallier": Pallier[]};
    managers: { "pallier": Pallier[]};

    constructor() {
        this.products = { "product":[ ] } ;
        this.managers = { "pallier":[ ] };
        this.upgrades = { "pallier":[ ] };
        this.angelupgrades = { "pallier":[ ] };
        this.allunlocks = { "pallier":[ ] };
    }
}

Answer 1

Looking at your app.component.html, you have this line

<app-manager *ngIf="modal=='Managers'" (closemodalevent)="modal=null" [manager]="world.managers.pallier"></app-manager>

Assuming that your manager.component.ts expects this input, it means that the value that will be passed to the component is the resolved value in world.managers.pallier

looking at your code, I expect that in your manager.component.ts you have something similar to this

  @Input() manager: []CustomType;

This is so that the values match That means that in your manager.component.html you should be iterating over manager, like so

<div class="Modal" (clickOutside)="closemodal()">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div>
    <div *ngFor="let singleManager of manager">
      <div *ngIf="!singleManager.unlocked" class="ManagerLayout">
        <div>
          <div class="logo"><img class="LogoImage" 
           [attr.src]="server+singleManager.logo"></div>
        </div>
        <div>
          <div class="ManagerName">{{singleManager.name}}</div>
          <div class="ManagerCible">{{world.products.product[singleManager.idcible- 
           1].name}}</div>
        </div>
        <div class="ManagerCost">{{singleManager.seuil}}</div>
      </div>
      <button mat-raised-button id="HireButton" (click)="hireManager(singleManager)"
              [ngClass]="{'selectable': (world.money >= singleManager.seuil)}"> Hire !</button>
    </div>
  </div>
</div>

In order to access server in the child component, you would also need to pass down the value in your app.component

<app-manager *ngIf="modal=='Managers'" (closemodalevent)="modal=null" [manager]="world.managers.pallier" [server]="server"></app-manager>

your manager.component.ts should also expect this input, so add this line @Input() server: String;

Should work

Also, please take a look at Component Communcation documentation to properly understand how this logic works

Answer 2

See the comments directly in the template.

<div class="Modal" (clickOutside)="closemodal()">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div>

    <!-- world should be a property of manager.component.ts-->
    <div *ngFor="let manager of world.managers.pallier">

      <div *ngIf="!manager.unlocked" class="ManagerLayout">
        <div>

          <!-- put server inside single quotes -->
          <div class="logo"><img class="LogoImage" [attr.src]="'server'+manager.logo"></div>

        </div>
        <div>
          <div class="ManagerName">{{manager.name}}</div>
          <div class="ManagerCible">{{world.products.product[manager.idcible-1].name}}</div>
        </div>
        <div class="ManagerCost">{{manager.seuil}}</div>
      </div>
      <button mat-raised-button id="HireButton" (click)="hireManager(manager)"
              [ngClass]="{'selectable': (world.money >= manager.seuil)}"> Hire !</button>
    </div>
  </div>
</div>

Also, it's a good practice to use optional chaining in the template.

Instead of:

<div class="ManagerCible">
  {{world.products.product[manager.idcible-1].name}}
</div>

Use:

<div class="ManagerCible">
  {{world?.products?.product[manager.idcible-1]?.name}}
</div>

The question marks will protect your code against null values (imagine world is null/undefined.... you would get an error saying that you cannot access products of undefined. The question mark avoids this error).