Nrthugu

I would like to send the boolean value to true to another module component where I shall set the *ngIf value to true to enable the html content. It's navigating to the another component, but not able to enable the html content. I have tried viewchild,emitters,input, output but not able to achieve the desired outcome.

Calling component:

SuccessGet(res) {

    this.logs = res;



    for(let item of this.logs)

    {

        if(item._email == this.log._email && item._password == this.log._password)

        {

            alert("Login Successful");



            this.wt.LoginCall(true);     // here calling the other module component

        }

    }



    this.log = new LoginModel();

}

Called component:

export class WeatherComponent {

      title = 'TemperatureApp';



      //@Input() messagetochild_weather ;//to get the message from parent



      showweather : boolean = false;

      // showweather : boolean = false;



      bus : BusinessLogic = new BusinessLogic();

      WeatherModel : Weather = new Weather();

      WeatherModels : Array<Weather> = new Array<Weather>();

      num : number = 0;



      LoginCall(item : boolean) 

      {

          //this.ngAfterViewInit();

          this.showweather = item;

      }



      ngAfterViewInit(item : any): void

      {

          this.WeatherModels = this.bus.Load(); 

      }

HTML:

<div *ngIf=showweather class="card">//here i am using *ngIf

  <h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>

  <div class="card-body">

    <div id="table" class="table-editable">

      <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i class="fa fa-plus fa-2x"

            aria-hidden="true"></i></a></span>

      <table class=" table table-bordered table-responsive-md table-striped text-center table-responsive-sm" style="border-block-end-color:dodgerblue">

        <tr style="background-color: rgb(0, 255, 255)">

          <th class="text-center">Area Code</th>

          <th class="text-center" >Date</th>

          <th class="text-center">Country</th>

          <th class="text-center">State</th>

          <th class="text-center">City</th>

          <th class="text-center">Temperature</th>

          <th class="text-center">Action</th>

          <th class="text-center">Action</th>

        </tr>

You should use Subject/BehaviorSubject.

Service:

private statusValue = new Subject<Boolean>();

statusValue$ = this.statusValue.asObservable();



updateStatus(status){

  this.statusValue.next(status);

}

Component 1:

this.service.updateStatus(true);

Component2:

this.service.statusValue$.subscribe(value=>{console.log(value);}