as shown below i have a component named Treatment-as-tiff and in its html file there should be a button. that button should be visible when specific action occures in site-map-component.the problem is when i run the code and set that action to occure the button does not show up

please let me know what i am missing here

TreatmentAsTIFF html:

<button  *ngIf="iTreatmentAsTIFFVisibilityPasser.visibilityState" 
    title="Get Treatment As TIFF" 
    class="btn btn-sm btn-icon" 
    (click)="getTreatmentAsTIFF()">
    {{ "SITE.GET_TREATMENT_AS_TIFF" | translate }}
    <ng-content></ng-content>
</button>

TreatmentAsTIFF.ts:

import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { SYNOPSServicesProviderService} from '../services/SYNOPSServiceProvider/synopsservices-provider.service'
import { Subscription } from 'rxjs';


export interface ITreatmentAsTIFFVisibilityPasser {
  visibilityState: boolean
}

@Component({
  selector: 'app-treatment-as-tiff',
  templateUrl: './treatment-as-tiff.component.html',
  styleUrls: ['./treatment-as-tiff.component.css']
})
export class TreatmentAsTIFFComponent implements OnInit {
  iTreatmentAsTIFFVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
  subscriptionEvtEmitterOnTratmentAsTIFFEmitted: Subscription;

  constructor(private synopsServicesProvider:SYNOPSServicesProviderService) { 
    this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
  }

  ngOnInit(): void { 
    this.subscriptionEvtEmitterOnTratmentAsTIFFEmitted = this.synopsServicesProvider.getEventEmitterResponseFoRiskCalculation().subscribe((response: object)=> {
      console.log("OnTratmentAsTIFF response received: ",response)
     });
  }

  public getVisibilityState() {
    return this.iTreatmentAsTIFFVisibilityPasser.visibilityState;
  }
  public setInvisible() {
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = false
  }
  public setVisible() {
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true
  }
  
    private getTreatmentAsTIFF(fieldGeometry):void{
        this.synopsServicesProvider.startWebServiceForGetTreatmentAsTIFF(fieldGeometry);
    }
}

site-map-component:

import { TreatmentAsTIFFComponent } from '../treatment-as-tiff/treatment-as-tiff.component';

export interface ITreatmentAsTIFFVisibilityPasser {
    visibilityState: boolean
}

iTreatmentAsTIFFButtonVisibilityPasser:ITreatmentAsTIFFVisibilityPasser;
treatmentAsTIFFComponent: TreatmentAsTIFFComponent;

constructor() {
        this.iTreatmentAsTIFFButtonVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
        this.iTreatmentAsTIFFButtonVisibilityPasser.visibilityState = false
    }
...
...
...
private toggleGetTreatmentAsTIFFButtonToVisible():void{
    this.treatmentAsTIFFComponent.setVisible()
}
private toggleGetTreatmentAsTIFFButtonToInvisible():void{
    this.treatmentAsTIFFComponent.setInvisible()
}

site-map-component.html:

<app-treatment-as-tiff></app-treatment-as-tiff>

CodePudding user response：

It's because you're setting visibilityState of iTreatmentAsTIFFVisibilityPasser in TreatmentAsTIFFComponent to false. Set it to true if you want it to be displayed:

export class TreatmentAsTIFFComponent implements OnInit {
  ...

  constructor(private synopsServicesProvider:SYNOPSServicesProviderService) { 
    this.iTreatmentAsTIFFVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
    this.iTreatmentAsTIFFVisibilityPasser.visibilityState = true; // <-- HERE!
  }

  ...
}

Or you're not calling the toggleGetTreatmentAsTIFFButtonToVisible function inside the SiteMapComponent. And I'm certain that your reference to your child element of TreatmentAsTIFFComponent inside SiteMapComponent is not working.

Here's how you get the reference of TreatmentAsTIFFComponent inside SiteMapComponent:

import {
    ...
    ViewChild,
    ...
} from '@angular/core';

...

@Component({
    ...
})
export class SiteMapComponent implements OnInit {
    @ViewChild(TreatmentAsTIFFComponent) treatmentAsTIFFComponent: TreatmentAsTIFFComponent;

...

    private toggleGetTreatmentAsTIFFButtonToVisible():void{
        this.treatmentAsTIFFComponent.setVisible()
    }
    private toggleGetTreatmentAsTIFFButtonToInvisible():void{
        this.treatmentAsTIFFComponent.setInvisible()
    }
}

CodePudding user response：

To invoke a method in the child component from the parent component, you can use @ViewChild decorator,

The @ViewChild is being used to inject a reference to TreatmentAsTIFFComponent so that the SiteMapComponent can use it in its template, in order to call the public methods of the latter.

• In your site-map.component.ts file,

import { ViewChild } from '@angular/core';
import { TreatmentAsTIFFComponent } from '../treatment-as-tiff/treatment-as-tiff.component';

export interface ITreatmentAsTIFFVisibilityPasser {
  visibilityState: boolean
}

iTreatmentAsTIFFButtonVisibilityPasser: ITreatmentAsTIFFVisibilityPasser;

constructor() {
  this.iTreatmentAsTIFFButtonVisibilityPasser = {} as ITreatmentAsTIFFVisibilityPasser;
  this.iTreatmentAsTIFFButtonVisibilityPasser.visibilityState = false
}

export class SiteMapComponent implements OnInit {

  @ViewChild(TreatmentAsTIFFComponent) treatmentAsTIFFComponent: TreatmentAsTIFFComponent;

  ngOnInit() {

  }

  toggleGetTreatmentAsTIFFButtonToVisible(): void {
    this.treatmentAsTIFFComponent.setVisible()
  }

}

Note: The reference to treatmentAsTIFFComponent in SiteMapComponent will only be available once the view of the parent component is completely initialized.