CODEWITHSUNDEEP
angular
Vel
Vel

Reputation: 9331

how to communicate child component to parent sibling components?

I want to show the popup from bucket-modal.component.ts when the user mouseover/mouseleave on the list.component.ts. How to communicate between list.component.ts to bucket-modal.component.ts? My code is here.

list.component.ts

@Component({    
    selector: 'list',
    templateUrl: 'list.component.html',
    styleUrls: ['list.component.css'],
})

export class ListComponent implements OnInit {
 @Input() state: boolean;
    @Output() toggle = new EventEmitter();
    onHover() {
    this.state = true;
    this.toggle.emit(this.state);
    console.log("state is ----------" + this.state);
    }
    onHoverOut() {
    this.state = false;
    this.toggle.emit(this.state);
    console.log("state is------ " + this.state);
    }
}

list.component.html

<a (mouseover)="onHover()" (mouseleave)="onHoverOut()">random Link list</a>

listdetails.component.ts

@Component({

    selector: 'app-list-detail',
    templateUrl: 'app-list.component.html',
    styleUrls: ['app-list.component.css'],
})


export class ListDetailComponent implements OnInit {


}

listdetails.component.html

<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<bucket-modal [(showMeaddBucket)]="show2ClickedBucket" [state]="PopUpshow" (toggle)="PopUpshow=$event"></bucket-modal>

bucket-modal.component.ts

@Component({    
    selector: 'bucket-modal',
    templateUrl: 'bucket-modal.component.html',
    styleUrls: ['bucket-modal.component.css'],
})



export class BucketModalComponent implements OnInit {

      @Input() state: boolean;
      @Output() toggle = new EventEmitter();
    onHover() {
        this.state = true;
        this.toggle.emit(this.state);
        console.log("state is " + this.state);
    }
    onHoverOut() {
        this.state = false;
        this.toggle.emit(this.state);
        console.log("state is " + this.state);
    }
}

Upvotes: 5

Views: 403

Answers (2)

Vivek Doshi
Vivek Doshi

Reputation: 58553

Let's consider I have components like this,

// Components
-parent 1
    - child 11
-parent 2
    - child 21
-parent 3
    - chils 31

// NgModule
- NgModule
    -> that has all these components
    -> Provider : CommonService

Now I want to pass the data from child 11 to all the parent(1,2,3)

In that case, you need service, and that service needs to be at module level e.g CommonService Now All you need to do is to inject that service in those components in which you want to access those data.

You can also create eventEmitter in CommonService and FireItFrom child11 and subscribe to that eventEmitter in your all parent components.

Upvotes: 0

J&#225;n Halaša
J&#225;n Halaša

Reputation: 8421

I think the easiest way is to create a public method in BucketModalComponent which will show the popup dialog. Something like

export class BucketModalComponent implements OnInit {
  showDialog(): void {
    // Open the popup dialog
  }
}

Then you can call it in listdetails.component.html:

<list ... (toggle)="modal.showDialog()"></list>
<bucket-modal #modal ... ></bucket-modal>

Upvotes: 1

Related Questions